Vue.js中如何获取多选v-select的选中/移除值

首先得明确：Vuetify的v-select组件在多选模式下，@input事件返回的确实是完整的选中数组，并没有直接暴露刚添加/移除的单个项。不过我们可以通过对比「上一次的选中状态」和「当前新的选中状态」来找出差异，实现你想要的效果。

这里有两种常用的实现方式：

方法一：利用@input事件 + 保存历史选中值 #

在组件的data里维护一个变量来记录上一次的选中状态，每次触发changed函数时，对比新旧数组找出新增或移除的项：

<template>
  <v-select 
    multiple 
    v-model="group.structures" 
    :options="filter" 
    label="name" 
    @input="changed" 
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      group: { structures: [] },
      filter: [],
      prevSelected: [] // 存储上一次的选中数组
    };
  },
  methods: {
    changed(newSelected) {
      // 找出新增的项：在新数组里但不在旧数组里的元素
      const addedItems = newSelected.filter(item => !this.prevSelected.includes(item));
      // 找出移除的项：在旧数组里但不在新数组里的元素
      const removedItems = this.prevSelected.filter(item => !newSelected.includes(item));

      // 处理单个变化项（假设用户每次只操作一个选项）
      if (addedItems.length > 0) {
        console.log("刚选中的项:", addedItems[0]);
        // 这里可以添加你的选中逻辑
      } else if (removedItems.length > 0) {
        console.log("刚移除的项:", removedItems[0]);
        // 这里可以添加你的移除逻辑
      }

      // 更新历史选中值，为下一次对比做准备
      this.prevSelected = [...newSelected];
    }
  },
  mounted() {
    // 初始化历史选中值为组件初始的选中状态
    this.prevSelected = [...this.group.structures];
  }
};
</script>

方法二：使用watch监听选中值变化 #

如果你不想用@input事件，也可以通过watch来监听group.structures的变化，同样对比新旧值：

<template>
  <v-select 
    multiple 
    v-model="group.structures" 
    :options="filter" 
    label="name" 
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      group: { structures: [] },
      filter: []
    };
  },
  watch: {
    // 监听选中数组的变化
    'group.structures': {
      handler(newVal, oldVal) {
        const addedItems = newVal.filter(item => !oldVal.includes(item));
        const removedItems = oldVal.filter(item => !newVal.includes(item));

        if (addedItems.length) {
          console.log("选中的项:", addedItems[0]);
        } else if (removedItems.length) {
          console.log("移除的项:", removedItems[0]);
        }
      },
      deep: true // 如果你的选项是对象类型，需要开启深度监听
    }
  }
};
</script>

注意事项 #

• 如果用户一次操作多个选项（比如按住Ctrl多选/取消多选），addedItems或removedItems会包含多个元素，你可以根据业务需求调整处理逻辑（比如遍历所有变化项）。
• 如果你的选项是对象类型，不要用includes来判断（因为对象是引用类型），可以改用find对比唯一标识字段（比如id），例如：

  const addedItems = newVal.filter(newItem => 
    !oldVal.some(oldItem => oldItem.id === newItem.id)
  );
  

内容的提问来源于stack exchange，提问作者CaPiTo26