I'm using Vuetify and its v-select ponent 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 plete 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 plete 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:

I'm using Vuetify and its v-select ponent 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 plete 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 plete 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

• javascript
• vuejs2
• vue-ponent
• vuetify.js
• v-select

Share Improve this question Follow edited Nov 13, 2018 at 20:50 David Thomas 254k5353 gold badges382382 silver badges419419 bronze badges asked Nov 13, 2018 at 19:22 kecmankecman 86333 gold badges1717 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Actually there is only one event related to changing values of v-autoplete : @change (See https://vuetifyjs./en/ponents/autopletes#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 ponent with a new attached event (in this example, for the last change).

Vue.ponent('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-autoplete',
  template: '<v-autoplete @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-autoplete>',

})

Then you can use your ponent 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

Replace

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

by

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