vue实现单选删除
Vue 实现单选删除功能
在 Vue 中实现单选删除功能，通常涉及列表渲染、数据绑定和事件处理。以下是实现该功能的几种常见方法：
使用 v-for 和 v-model 实现单选删除
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
<input type="radio" v-model="selectedIndex" :value="index">
{{ item.name }}
</li>
</ul>
<button @click="deleteItem">删除选中项</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '项目1' },
{ name: '项目2' },
{ name: '项目3' }
],
selectedIndex: null
}
},
methods: {
deleteItem() {
if (this.selectedIndex !== null) {
this.items.splice(this.selectedIndex, 1)
this.selectedIndex = null
}
}
}
}
</script>使用计算属性和方法实现更安全的删除
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">
<input type="radio" v-model="selectedId" :value="item.id">
{{ item.name }}
</li>
</ul>
<button @click="deleteSelected" :disabled="!selectedId">删除</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' }
],
selectedId: null
}
},
methods: {
deleteSelected() {
this.items = this.items.filter(item => item.id !== this.selectedId)
this.selectedId = null
}
}
}
</script>使用 Vuex 管理状态（适用于大型应用）
// store.js
export default new Vuex.Store({
state: {
items: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' }
],
selectedItemId: null
},
mutations: {
deleteItem(state) {
state.items = state.items.filter(item => item.id !== state.selectedItemId)
state.selectedItemId = null
},
selectItem(state, id) {
state.selectedItemId = id
}
}
})<template>
<div>
<ul>
<li v-for="item in $store.state.items" :key="item.id">
<input
type="radio"
:value="item.id"
:checked="$store.state.selectedItemId === item.id"
@change="$store.commit('selectItem', item.id)"
>
{{ item.name }}
</li>
</ul>
<button
@click="$store.commit('deleteItem')"
:disabled="!$store.state.selectedItemId"
>
删除
</button>
</div>
</template>注意事项
- 使用唯一标识符（如id）而非数组索引作为key，避免删除后出现渲染问题
- 删除操作前应确认是否有选中项，避免误操作
- 对于复杂数据结构，考虑使用深拷贝或Vue.set确保响应式更新
- 大型项目推荐使用Vuex集中管理状态
以上方法可根据项目需求和复杂度选择适合的实现方式。
