当前位置：首页 > VUE

vue实现单选删除

2026-02-20 13:13:33VUE

实现单选删除功能

在Vue中实现单选删除功能通常涉及以下关键点：数据绑定、事件处理和列表渲染。以下是一个完整的实现方案：

数据准备

定义需要渲染的列表数据和选中的项：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItem: null
  }
}

模板渲染

使用v-for渲染列表，配合v-model或v-on实现选择功能：

<ul>
  <li v-for="item in items" :key="item.id">
    <input 
      type="radio" 
      :id="'item-' + item.id" 
      :value="item" 
      v-model="selectedItem"
    >
    <label :for="'item-' + item.id">{{ item.name }}</label>
  </li>
</ul>
<button @click="deleteItem" :disabled="!selectedItem">删除选中项</button>

删除方法实现

在methods中定义删除逻辑：

methods: {
  deleteItem() {
    if (!this.selectedItem) return

    const index = this.items.findIndex(
      item => item.id === this.selectedItem.id
    )

    if (index !== -1) {
      this.items.splice(index, 1)
      this.selectedItem = null
    }
  }
}

替代方案（不使用v-model）

如果需要更灵活的控制，可以使用事件处理：

<input 
  type="radio" 
  :name="'group-' + item.id" 
  @change="selectItem(item)"
>

对应方法：

selectItem(item) {
  this.selectedItem = item
}

注意事项

确保为每个radio设置相同的name属性以实现单选效果
使用:key时推荐绑定唯一标识符（如id）
删除操作前应确认选中项不为null
考虑添加确认对话框防止误删

完整组件示例

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input
          type="radio"
          :id="'item-' + item.id"
          v-model="selectedItem"
          :value="item"
        >
        <label :for="'item-' + item.id">{{ item.name }}</label>
      </li>
    </ul>
    <button @click="deleteItem" :disabled="!selectedItem">
      删除选中项
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItem: null
    }
  },
  methods: {
    deleteItem() {
      if (!this.selectedItem) return

      const index = this.items.findIndex(
        item => item.id === this.selectedItem.id
      )

      if (index !== -1) {
        this.items.splice(index, 1)
        this.selectedItem = null
      }
    }
  }
}
</script>

vue实现单选删除