如何在 v-select 中跟踪项目 selected？

Question

我正在使用 Vuetify 1.5.2 开发 vue.js 应用程序。我们有这样一个 v-select：

<v-select
    v-model="selectedOptions"
    :items="options"
    multiple
    outline
    offset-y
    small-chips
    @change="(selection) => selectionChanged(selection)" >
</v-select>
...
...
selectionChanged(selection) {
    console.log('selection=', selection);
}

这给了我一个如下所示的下拉菜单：

我正在尝试将 selected 选项传递给处理程序，但我没有得到我 selected 的特定项目，而是 selected 项目的数组selectedOptions 代替。实际上，我无法分辨 select 编辑了哪个项目。是否有道具或事件可以帮助我跟踪在 Vuetify 1.5.2 中编辑的特定项目 select？

谢谢

Answer 1

我已经做到了little snippet，你可以试试。

对于长期而言，代码如下：

<script type="text/x-template" id="app-template">
  <v-app>
    <v-container>
      <v-select
       v-model="selectedItems"
       :items="options"
       multiple
       outline
       offset-y
       @change="(selection) => selectionChanged(selection)">
      </v-select>
    </v-container>
  </v-app>
</script>

<div id="app"></div>

const App = {
  template: '#app-template',
  data: () => ({
    selectedItems: [],
    options: [
      "One", "Two", "Three"
    ],
    previousSelection: []
  }),
  methods: {
    selectionChanged(selection) {
      console.log('previous selection = ', this.previousSelection)
      
      let selected = null
      if (this.previousSelection.length < selection.length) {
        selected = selection.filter(x => !this.previousSelection.includes(x))[0]  
      } else if (this.previousSelection.length > selection.length) {
        selected = this.previousSelection.filter(x => !selection.includes(x))[0]
      }
      
      console.log('selected = ', selected)
      
      this.previousSelection = selection
      console.log('selection = ', selection)
    }
  }
}


new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

如果您保留之前选择的痕迹（我使用了 previousSelection 变量）。您可以在当前选择和上一个选择之间进行区分，从而为您提供已单击的项目。

检查这一行就完成了：

selected = selection.filter(x => !this.previousSelection.includes(x))[0]

对于取消选中，它执行相反的操作，它采用不在选择中但在上一个选择中的那个：

selected = this.previousSelection.filter(x => !selection.includes(x))[0]

这里的[0]是给你数组中单独的一项，它是前一个选择与当前选择之间的差异的结果。

这可能不是最优雅的解决方案，但它适用于 check/uncheck。

如何在 v-select 中跟踪项目 selected？

How do I track the item selected in a v-select?

vue.js

vuetify.js

v-select