如何在Vuetify 1.5.2的v-select中追踪选中的具体项？

在Vuetify 1.5.2版本中，多选模式下的v-select确实没有内置的事件能直接返回单个被选中/取消的项——@change事件只会返回当前完整的选中数组。不过我们可以通过维护历史选中状态，对比前后数组的差异来定位具体变化的项，实现起来很简单：

实现步骤 #

1. 在组件的data中新增一个变量，用于存储上一次的选中状态；
2. 在@change事件触发时，对比当前选中数组和历史状态，找出新增或取消的项；
3. 更新历史状态为当前选中数组，为下一次对比做准备。

完整代码示例 #

组件模板 #

<v-select 
  v-model="selectedOptions" 
  :items="options" 
  multiple 
  outline 
  offset-y 
  small-chips 
  @change="selectionChanged"
></v-select>

脚本逻辑 #

export default {
  data() {
    return {
      selectedOptions: [],
      // 存储上一次的选中状态
      previousSelectedOptions: [],
      options: ['选项A', '选项B', '选项C', '选项D'] // 示例选项，可替换为你的实际数据
    }
  },
  methods: {
    selectionChanged(currentSelection) {
      // 找出新增选中的项：当前有但历史状态中没有的项
      const addedItems = currentSelection.filter(item => !this.previousSelectedOptions.includes(item))
      // 找出取消选中的项：历史状态中有但当前没有的项
      const removedItems = this.previousSelectedOptions.filter(item => !currentSelection.includes(item))

      // 根据需求处理新增/取消的项
      if (addedItems.length) {
        console.log('新增选中的项:', addedItems)
        // 这里可以针对单个新增项做操作，比如遍历addedItems处理
        addedItems.forEach(item => {
          console.log('单个新增项:', item)
        })
      }
      if (removedItems.length) {
        console.log('取消选中的项:', removedItems)
      }

      // 更新历史选中状态，必须用展开运算符创建新数组，避免引用同步
      this.previousSelectedOptions = [...currentSelection]
    }
  },
  mounted() {
    // 初始化时同步历史状态
    this.previousSelectedOptions = [...this.selectedOptions]
  }
}

注意事项（针对对象数组选项） #

如果你的options是对象数组（比如包含id和text的对象），不能直接用includes对比，需要用唯一标识（如id）来判断：

// 假设options结构为[{id: 1, text: '选项A'}, {id: 2, text: '选项B'}, ...]
const addedItems = currentSelection.filter(currentItem => 
  !this.previousSelectedOptions.some(prevItem => prevItem.id === currentItem.id)
)

const removedItems = this.previousSelectedOptions.filter(prevItem => 
  !currentSelection.some(currentItem => currentItem.id === prevItem.id)
)

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