Через нажатие кнопки Создать появляется диалог, в который вводим необходимые данные и создаём пост. Создадим переиспользуемый компонент диалогового окна.
Рубрики
Рубрика: Vue project
Рубрики
UI Компоненты
Button и Input
Нарушается стилистика кнопок Создать и Удалить
Кнопка получается как переиспользуемый компонент
src\components\UI
папка содержит библиотеку UI элементов (button, input и т.д.)
Название или свойство name компонента должно состоять
для того чтобы отличались от дефолтных html тегов
не менее из двух слов
Для этого нужно в шаблон компонента PostItem добавить кнопку удаления.
Рубрики
Отдельно взятый пост
PostItem
Выделяется ещё один компонент
Возможно в какой то ситуации не потребуется отрисовывать список постов PostList, а нам потребуется отрисовывать отдельно взятый пост.
компонент должен принимать пропс как раз сам пост, где тип этого пропса является объект и он обязателен.
Директива 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>