я вывожу список с помощью v-for, затем когда я удаляю элемент массива по индексу методом splice он удаляется как и ожидалось, но v-for продолжает отображать несуществующей элемент, при этом перестаёт отображать последний элемент массива.
ПОЧЕМУ ТАК ПРОИСХОДИТ ? И КАК ЭТО ИСПРАВИТЬ ?
Родительский компонент:
<template>
<div id="app" class="w_max h_max grid grid_center grid_vertical_center">
<ul class="main">
<item v-for="(item, index) in tasks" :options="item" :key="index" @delete:item="dell(index)"></item>
</ul>
</div>
</template>
<script>
import item from '@/components/item'
export default {
name: 'App',
components: {
item
},
data () {
return {
list: [
{
text: 'text - 1'
},
{
text: 'text - 2'
},
{
text: 'text - 3'
}
]
}
},
methods: {
dell (index) {
this.list.splice(index, 1)
}
},
computed: {
tasks () {
return this.list
}
}
}
</script>
<style scoped>
#app {
padding: 40px 15px;
background-color: rgb(250, 242, 242);
}
.main {
max-width: 940px;
width: 100%;
min-height: 80%;
}
</style>
Дочерний компонент:
<template>
<li class="item grid grid_cenrical_center">
<div class="item__text">
<h2>{{ item.text }}</h2>
</div>
<div class="item__bottom">
<button @click="dell">dell</button>
</div>
</li>
</template>
<script>
export default {
props: [
'options'
],
data () {
return {
item: this.options
}
},
methods: {
dell () {
this.$emit('delete:item', true)
}
}
}
</script>
<style scoped>
.item {
padding: 10px 20px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
background-color: white;
grid-template-columns: 5fr 1fr;
grid-column-gap: 15px;
margin-bottom: 1px;
}
.item__text {
font-weight: 100;
font-family: 'Times New Roman', Times, serif
}
</style>