Для этого нужно в шаблон компонента 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>
Рубрики
Декомпозиция
Создаем переиспользуемые компоненты
можно чётко выделить компоненты, которые четко можно переиспользовать (пример добавлять на разные страницы)
- создание поста
- список постов
src\components
папка содержит компоненты
vbase и нажимаем Tab
сразу разворачивается соответствующая структура для IDE PHPStorm или WebStorm
создание формы в шаблоне компонента с input и button, которая будет добавлять пост в массив