Рубрики
Vue project Vue.js

Удаление поста из списка

Удаление поста из списка
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>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *