4

Is there any on-select, on-remove properties in v-autocomplete in vuetify? I would like to handle those events manually. I tried @change, but in this case i don't know which one is added/removed.

  <v-autocomplete
    :items="states"
    item-text="name"
    label="State"
    @change="pushOrRemoveStates()"
    multiple
  ></v-autocomplete>

In the @change, i am calling method pushOrRemoveStates. i can select multiple options in autocomplete, so in here i would like to handle onSelect & onRemove of the options, i have to do few operations once we select/remove the options. Its not possible using @change because i don't know weather option is selected or removed, because in both cases @change will execute.

Sam
  • 2,275
  • 9
  • 30
  • 53
  • add some code snippet please – Boussadjra Brahim Oct 08 '18 at 11:03
  • Hey, i updated the question, please check. – Sam Oct 09 '18 at 03:42
  • I need some thing like this in vuetify https://stackoverflow.com/questions/42427928/material-2-autocomplete-select-option – Sam Oct 09 '18 at 06:41
  • Any think like `@select` `@remove` for v-autocomplete or v-combobox? – Sam Oct 09 '18 at 06:49
  • Just had a look at the source code and couldn't find something like this. You could only keep a copy of the value before the change happens and, on change, compare both versions. Perhaps also request it as a new feature in their issue tracker? – alex3683 Oct 09 '18 at 11:47

2 Answers2

3

To know what changed, you have to declare a v-model. This v-model is reactive and thus you can watch for the changes on the same.

Since your auto-complete is multiple , declare the v-model to be of type array.

     new Vue({
       el: '#app',
       data () {
         return {
           states: [
            'Alabama',
            'Alaska',
            'American Samoa',
            'Arizona'
           ],
          selected:['Alabama', 'Alaska'] // this is your v-model. and you watch any change to this.
        }
      },
       watch: {
       selected (newSelectedArray, oldSelectedArray) {
         console.log(newSelectedArray);
         console.log(oldSelectedArray);
         // so now comparing your old to new array you would know if a state got 
         // added or removed, and fire subsequent methods accordingly.
       }
   })
      <v-autocomplete
        :items="states"
        v-model="selected"
        item-text="name"
        label="State"
        @change="pushOrRemoveStates()"

Here is a code pen for reference: https://codepen.io/jayas/pen/gBVgvx

Jaya
  • 3,721
  • 4
  • 32
  • 48
2

Try to watch the model of autocomplete.

watch:{
 model(val,oldval) {
           //watch you code here
 }
}
//link model as v-model
<v-autocomplete
    v-model="model"
 >
Sushil GC
  • 127
  • 1
  • 2
  • 11