vuetify v-select with multiple options - getting selected/deselected option

Question

I'm using Vuetify and its v-select component with multiple option enabled to allow selecting multiple options.

These options represent talent(candidate) pools for my CRM software.

What it needs to do is that when some option in v-select is checked, candidates from checked talent pool are fetched from API and saved to some array (let's call it markedCandidates), and when option is deselected, candidates from that pool need to be removed from markedCandidates array.

The problem is that @change or @input events return complete list of selected options. I need it to return just selected/deselected pool and information if it's selected or deselected, to be able to update the markedCandidates array.

My existing code:

<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>

Any idea how to solve this?

As I said, loadCandidatesFromTalentPool(change) returns complete array of v-model (markedCandidates)..

EDIT: I found this solution, it's more of a workaround actually, would be nice if there was dedicated event for this situation:

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

Answer 1

Actually there is only one event related to changing values of v-autocomplete : @change (See https://vuetifyjs.com/en/components/autocompletes#events). The watch approach is useful if you want to monitor only individual changes. However, if you plan to do this with more selectors, it could be better if you create a custom reusable component with a new attached event (in this example, for the last change).

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>',

})

Then you can use your component as simple as:

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

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

The changed only shows items which are actually changed. I've added the inserted and deleted arrays to return new items added or removed from the selection.

Source example: https://codepen.io/fraigo/pen/qQRvve/?editors=1011