Question

vuetify中的v-自动完成功能中是否有任何选择，删除属性？我想手动处理这些事件。我尝试了@change，但是在这种情况下，我不知道添加/删除了哪个。

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

在@change中，我正在调用方法 pushOrRemoveStates 。我可以在自动完成功能中选择多个选项，因此在这里我要处理选项的onSelect和onRemove，一旦选择/删除选项，我将只需执行少量操作。无法使用@change，因为我不知道是否选择或删除了天气选项，因为在两种情况下都将执行@change。

Answer 1

尝试观察自动填充的模型。

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

Answer 2

要知道更改了什么，必须声明v-model。这个v模型是反应性的，因此您可以监视相同的变化。

由于您的自动完成次数为多次，因此请声明v-model的类型为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()"

这是一支电笔供参考：https://codepen.io/jayas/pen/gBVgvx

v-autocomplete在vuetify中选择删除

2 个答案: