当前位置：首页 > VUE

vue实现单选删除

2026-01-19 21:08:51VUE

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>