vuetify v-select 与多个选项 - 获取选择/取消选择选项答案

【问题标题】：vuetify v-select with multiple options - getting selected/deselected optionvuetify v-select 与多个选项 - 获取选择/取消选择选项
【发布时间】：2019-04-16 16:58:57
【问题描述】：

我正在使用Vuetify 及其v-select 组件并启用multiple 选项以允许选择多个选项。

这些选项代表我的 CRM 软件的人才（候选人）库。

它需要做的是，当 v-select 中的某个选项被选中时，从 API 中取出选中的人才库中的候选人并保存到某个数组（我们称之为markedCandidates），当取消选择选项时，候选人需要从该池中删除 markedCandidates 数组。

问题是@change 或@input 事件返回所选选项的完整列表。我需要它只返回选中/取消选中的池和信息（如果它被选中或取消选中），以便能够更新 markedCandidates 数组。

我现有的代码：

<v-select return-object multiple @change="loadCandidatesFromTalentPool" v-model="markedCandidates" :item-text="'name'" :item-value="'name'" :items="talentPoolsSortedByName" dense placeholder="No pool selected" label="Talent Pools" color='#009FFF'>
  <template slot="selection" slot-scope="{ item, index }">
    <span v-if="index === 0">{{ item.name }}</span>
    <span v-if="index === 1" class="grey--text caption othersSpan">(+{{ talentPools.length - 1 }} others)</span>
  </template>
</v-select>

知道如何解决这个问题吗？

正如我所说，loadCandidatesFromTalentPool(change) 返回完整的数组 v-model (markedCandidates)..

编辑：我找到了这个解决方案，实际上它更像是一种解决方法，如果有专门针对这种情况的事件会很好：

https://codepen.io/johnjleider/pen/OByoOq?editors=1011

【问题讨论】：

标签： javascript vuejs2 vue-component vuetify.js v-select

【解决方案1】：

实际上只有一个事件与更改v-autocomplete 的值有关：@change（参见https://vuetifyjs.com/en/components/autocompletes#events）。如果您只想监控单个更改，watch 方法很有用。但是，如果您打算使用更多选择器来执行此操作，最好创建一个自定义的可重用组件，并附带一个新的附加事件（在本例中，最后一次更改)。

Vue.component('customselector',{
  props:[
    "value",
    "items"
  ],
  data: function() {
    return {
      content: this.value,
      oldVal : this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    },
    changed (val) {
      oldVal=this.oldVal
      //detect differences
      const diff = [
        ...val.filter(x => !oldVal.includes(x)),
        ...oldVal.filter(x => !val.includes(x))
      ]
      this.oldVal = val
      var deleted=[]
      var inserted=[]
      // detect inserted/deleted
      for(var i=0;i<diff.length;i++){
        if (val.indexOf(diff[i])){
          deleted.push(diff[i])
        }else{
          inserted.push(diff[i])
        }
      }
      this.$emit("change",val)
      this.$emit("lastchange",diff,inserted,deleted);
    }
  },
  extends: 'v-autocomplete',
  template: '<v-autocomplete @input="handleInput" @change="changed" :items="items" box chips color="blue lighten-2" label="Select" item-text="name" item-value="name" multiple return-object><slot></slot></v-autocomplete>',

})

然后您可以像这样简单地使用您的组件：

<customselector @lastchange="lastChange" >...</customselector>

methods:{
    lastChange: function(changed, inserted, deleted){
      this.lastChanged = changed
    }
}

changed 仅显示实际更改的项目。我添加了 inserted 和 deleted 数组以返回从选择中添加或删除的新项目。

来源示例：https://codepen.io/fraigo/pen/qQRvve/?editors=1011

【讨论】：

【解决方案2】：

替换

:item-text="'name'" :item-value="'name'"

由

item-text="name" item-value="name"

【讨论】：