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

I don't really understand. You say you want to retrieve the selected items. But the ones that are ticked are those which are selected, and so they are in `selectedOptions`. Maybe you mean you want the new ones that have been selected ? — lbris, Dec 30 '20 at 17:47
Yes, I suppose you could say: the last one which was check (or unchecked). — gib65, Dec 30 '20 at 19:40
I proposed an answer that works both when checking and unchecking. — lbris, Dec 30 '20 at 21:36

lbris · Accepted Answer · 2020-12-30T21:35:34.680

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.

Thanks Ibris. I did something similar to this in the watch on the array. Seems silly that v-select would force developers to implement a solution like this, but I guess it works for our purposes. Again, thanks. — gib65, Dec 31 '20 at 14:20
This is something they may add if asked for. You could open a feature request [HERE](https://github.com/vuetifyjs/vuetify/issues). — lbris, Dec 31 '20 at 16:26

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

1 Answers1