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

Удаление поста из списка
src\components\PostList.vue

Поскольку в компоненте PostList в качестве СпискаПостов мы принимаем в виде пропса (пропсы изменять не стоит), то значит из этого компонента нам следует отдать событие наверх.

Так же когда мы используем циклы, то необходимо использовать уникальный ключ. Для каждого объекта необходимо делать id (мы указываем в качестве ключа id, который забираем у поста)

vue строит виртуальное дерево. Когда мы в цикле на основании кого то массива рисуем какое то количество элементов, vue для каждого из них создаёт виртуальный узел или виртуальную ноду. Для алгоритма с которыми этими нодами работают важно чтобы был какой то уникальный ключ, по которому однозначно эту ноду можно было распознать. В качестве ключей не рекомендуется использовать индексы элементов в массиве, поскольку при удалении например элемента индексы могут сдвигаться. Именно поэтому в посты мы добавляли уникальные идентификаторы id. Теперь мы их используем в качестве ключей, поскольку они всегда статичны и изменяться не могут.

Прослушаем событие remove и в данном случае мы так же делаем emit и отдаём событие remove наверх и прокидываем вторым параметром пост.

src\components\PostList.vue

<template>
<div>
<h3>Список постов</h3>
<post-item 
:post="post"
:key="post.id"
@remove="$emit('remove',post)"
v-for="post in posts"
/>
</div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default{
 components:{PostItem},
 props:{
  posts:{
   type:Array,
   required: true, говорит обязательно или нет 
}
}
}
</script>

<style>
</style>