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

Question

I'm developing a vue.js application using Vuetify 1.5.2. We have a v-select like this:

<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);
}

This gives me a dropdown menu that looks like this:

I'm trying to pass the selected option to the handler but I'm not getting the specific item I selected but the array of selected items in selectedOptions instead. In effect, I can't tell which item was selected. Is there a prop or an event that will help me track the specific item selected in Vuetify 1.5.2?

Thanks

Answer 1

I've done this little snippet that you can try.

For the long term, here is the code :

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

If you keep trace of the previous selection (I used previousSelection variable). You can do the difference between the current selection and the previous one, that gives you the item that has been clicked.

It is done with this line for checking:

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

For unchecking, it does the inverse, it takes the one that is not in the selection but was in the previous selection :

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

The [0] is here to give you the item that is alone in the array that is the result of the difference between the previous selection and the current one.

This may not be the most elegant solution, but it works for check/uncheck.