Удаление поста из списка
src\components\PostItem.vue
При нажатии на кнопку Удалить с массива удалялся соответствующий пост. Делаем emit и название события указываем remove и наверх прокидываем сам пост. Это делается поскольку внутри этого компонента мы с массива пост удалить не можем, поэтому мы просто по цепочке отдаём пост наверх.
src\components\PostItem.vue
<template>
<div class="post">
<div>
<div><strong>Название:</strong>{{post.title}}</div>
<div><strong>Описание:</strong>{{post.body}}</div>
</div>
<div class="post_btns">
<button @click="$emit('remove', post)">Удалить</button>
</div>
</div>
</template>
<script>
export default{
props:{
post:{
type:Object,
required:true,
}
}
}
</script>
<style scoped>
.post{
padding: 15px;
border: 2px solid teal; темно зелёная рамка
margin-top:15px; отступ сверху
display:flex;
align-tems: center;
justify-content: space-betwen; кнопка не прилипает к описанию
}
</style>