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

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

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

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

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