Удаление поста из списка
src\App
прослушаем событие в компоненте post-list. Создадим функцию removePost и параметром она принимает пост, который мы перекидывали в emit-те. С помощью функции фильтр по постам пробегаемся, но поскольку функция фильтр нам возвращает новый массив, то мы перезаписываем старый. И по итогу в результирующем в массив попадают те посты, id который не совпадает с id поста, который мы пытаемся удалить.
src\App
<template>
<div class="app">
<post-form
@create="createPost"
/>
<post-list
:posts="posts"
@remove="removePost"
/>
<div>
</template>
<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
export default{
components:{
PostList,PostForm,
}
data(){
return {
posts:[
{id:1,title: 'Javascript', body: 'Описание поста'},
{id:2,title: 'Javascript 2', body: 'Описание поста 2'},
{id:3,title: 'Javascript 3', body: 'Описание поста 3'},
{id:4,title: 'Javascript 4', body: 'Описание поста 4'},
]
}
}
methods:{
createPost(post,second,third){
this.posts.push(post);
}
removePost(post) {
this.posts = this.posts.filter(p => p.id !== post.id)
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app{
padding: 20px;
}
</style>