Рубрика: Vue.js

Директива v-model
PostForm

src\components\PostForm.vue

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-model="post.title"
class="input"
placeholder="Название">

<input 
type="text" 
v-model:"post.body"
class="input"
placeholder="Описание">

<button 
class="btn"
вешаем слушатель события при нажатии на кнопку
@click="createPost"
>Создать</button>
</form>
</template>

<script>
export default{
data(){
return {
post{
title:'',
body:'',
}
}
}
methods:{
 createPost(event){
 this.post.id=Date.now();

 this.posts.push(newPost);
 this.title='';
 this.body='';
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>