vue简单实现删除
Vue 删除功能实现
使用 v-for 和 splice 方法删除数组元素
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="deleteItem(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['苹果', '香蕉', '橙子']
}
},
methods: {
deleteItem(index) {
this.items.splice(index, 1)
}
}
}
</script>使用 filter 方法删除特定条件的元素
methods: {
deleteItem(id) {
this.items = this.items.filter(item => item.id !== id)
}
}从对象中删除属性
methods: {
deleteProperty(key) {
this.$delete(this.obj, key)
}
}与后端 API 交互删除数据
methods: {
async deleteItem(id) {
try {
await axios.delete(`/api/items/${id}`)
this.items = this.items.filter(item => item.id !== id)
} catch (error) {
console.error('删除失败:', error)
}
}
}使用 Vuex 管理状态删除
// store.js
mutations: {
DELETE_ITEM(state, id) {
state.items = state.items.filter(item => item.id !== id)
}
}
// 组件中
methods: {
deleteItem(id) {
this.$store.commit('DELETE_ITEM', id)
}
}注意事项
- 确保在删除前添加确认对话框
- 处理删除失败的情况
- 大型列表使用唯一 ID 而非索引作为 key
- 考虑删除后的 UI 反馈
