在Vue應用中，可能會有一些需要刪除的數據，這是常見的操作。Vue提供了方便的方法來刪除對應的數據。
let data = [
{ id: 1, name: 'Tom' },
{ id: 2, name: 'Jerry' },
{ id: 3, name: 'Mike' }
]
// 刪除id為2的數據
let index = data.findIndex(item =>item.id === 2)
data.splice(index, 1)
console.log(data)
// [{ id: 1, name: 'Tom' }, { id: 3, name: 'Mike' }]首先，我們需要有一組數據，這里我們使用一個數組來模擬。在以上代碼中，我們定義了一個data數組，它包含了三個對象，每個對象都有id和name屬性。我們現在想刪除其中id為2的數據。
使用findIndex方法可以返回指定元素在數組中的位置，如果沒有找到對應元素，則返回-1。這里我們通過調用findIndex方法來找到id為2的元素在data數組中的位置，將該位置保存在index變量中。
splice方法可以刪除數組中的元素，第一個參數是要刪除的元素在數組中的位置，第二個參數是要刪除元素的個數。在以上代碼中，我們調用splice方法來刪除數組中位置為index的元素，刪除一個元素。
最終，我們可以通過調用console.log方法來查看被刪除后的data數組，可以發現，id為2的數據已經被成功刪除了。
除了以上的方法，我們還可以使用Vue的v-for指令來渲染列表，然后配合使用Vue的事件綁定機制來實現刪除。以上代碼可以改寫成以下形式：
<div id="app">
<ul>
<li v-for="item in data" :key="item.id">
{{ item.name }}
<button @click="deleteData(item.id)">刪除</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
data: [
{ id: 1, name: 'Tom' },
{ id: 2, name: 'Jerry' },
{ id: 3, name: 'Mike' }
]
},
methods: {
deleteData(id) {
let index = this.data.findIndex(item =>item.id === id)
this.data.splice(index, 1)
}
}
})
</script>以上代碼中，我們定義了一個Vue實例，并將其綁定到id為app的元素上。在data屬性中，我們定義了與之前相同的數據數組。在模板中，使用v-for指令將data數組中的每個元素渲染成列表項，并使用:key屬性來為每個列表項指定一個唯一的key，以便Vue可以跟蹤每個列表項的變化。
在列表項中，我們使用
通過以上方法，我們可以輕松地刪除Vue應用中的對應數據，使應用更加靈活和易于維護。
上一篇vue刪除頁面元素