vue实现删除选项

Vue 实现删除选项的方法

使用 v-for 和 v-on 指令

通过 v-for 遍历数据数组，为每个选项添加删除按钮。使用 v-on 监听按钮点击事件，调用删除方法。

<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: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用 Vuex 管理状态

当应用状态较复杂时，可使用 Vuex 集中管理数据，通过 mutations 修改状态。

// store.js
const store = new Vuex.Store({
  state: {
    items: ['选项1', '选项2', '选项3']
  },
  mutations: {
    DELETE_ITEM(state, index) {
      state.items.splice(index, 1)
    }
  }
})

<template>
  <div>
    <ul>
      <li v-for="(item, index) in $store.state.items" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    deleteItem(index) {
      this.$store.commit('DELETE_ITEM', index)
    }
  }
}
</script>

使用事件总线

对于非父子组件通信，可通过事件总线实现删除功能。

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- 组件A -->
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { EventBus } from './eventBus'
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3']
    }
  },
  methods: {
    deleteItem(index) {
      EventBus.$emit('delete', index)
    }
  }
}
</script>

<!-- 组件B -->
<script>
import { EventBus } from './eventBus'
export default {
  created() {
    EventBus.$on('delete', index => {
      // 处理删除逻辑
    })
  }
}
</script>

使用计算属性

通过计算属性实现条件过滤，达到删除效果。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        {{ item }}
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项1', '选项2', '选项3'],
      deletedIndices: []
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter((_, index) => !this.deletedIndices.includes(index))
    }
  },
  methods: {
    deleteItem(index) {
      this.deletedIndices.push(index)
    }
  }
}
</script>

使用第三方库

借助 lodash 等工具库实现更复杂的删除逻辑。

import _ from 'lodash'

methods: {
  deleteItem(index) {
    this.items = _.reject(this.items, (_, i) => i === index)
  }
}