javascript - v-autocomplete on-select on-remove in vuetify - Stack Overflow

admin管理员组

文章数量:1289901

Is there any on-select, on-remove properties in v-autoplete 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-autoplete
    :items="states"
    item-text="name"
    label="State"
    @change="pushOrRemoveStates()"
    multiple
  ></v-autoplete>

In the @change, i am calling method pushOrRemoveStates. i can select multiple options in autoplete, 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.

Is there any on-select, on-remove properties in v-autoplete 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-autoplete
    :items="states"
    item-text="name"
    label="State"
    @change="pushOrRemoveStates()"
    multiple
  ></v-autoplete>

In the @change, i am calling method pushOrRemoveStates. i can select multiple options in autoplete, 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.

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Oct 9, 2018 at 3:42 Sam asked Oct 8, 2018 at 10:58 SamSam 2,42599 gold badges3434 silver badges5353 bronze badges 5

• add some code snippet please – Boussadjra Brahim Commented Oct 8, 2018 at 11:03
• Hey, i updated the question, please check. – Sam Commented Oct 9, 2018 at 3:42
• I need some thing like this in vuetify stackoverflow./questions/42427928/… – Sam Commented Oct 9, 2018 at 6:41
• Any think like @select @remove for v-autoplete or v-bobox? – Sam Commented Oct 9, 2018 at 6: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, pare both versions. Perhaps also request it as a new feature in their issue tracker? – alex3683 Commented Oct 9, 2018 at 11:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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-plete 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 paring your old to new array you would know if a state got 
         // added or removed, and fire subsequent methods accordingly.
       }
   })
      <v-autoplete
        :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

Try to watch the model of autoplete.

watch:{
 model(val,oldval) {
           //watch you code here
 }
}
//link model as v-model
<v-autoplete
    v-model="model"
 >

本文标签： javascriptvautocomplete onselect onremove in vuetifyStack Overflow