为什么我的 :search-input.sync 函数被调用了两次？

Question

在我的代码笔https://codepen.io/aaronk488/pen/MWbKNOq?editors=1011中一切正常，但我的同步功能搜索被调用了两次，我不知道为什么。我添加了一个条件语句，所以我的代码可以工作，但我很好奇同步函数被调用两次是否有原因。

这是我的HTML

<div id="app">
<v-app>
    <v-container >
    <v-row >
        <v-col cols="4" md="4">
        <v-autocomplete
            ref="autocomplete"
            label="Autocomplete"
            :items="components"
v-model="first"
            :search-input.sync="search"
            hint="need to open menu on focus, just like click"                     persistent-hint
                       
        ></v-autocomplete>
          </v-col>
          <v-col cols="4" md="4">
            <v-autocomplete
                         v-model="second"
            ref="autocomplete2"
            label="Autocomplete2"
            :items="components2"
                item-text="name"
  item-value="id"             
                         
                            
            hint="need to open menu on focus, just like click this"                     persistent-hint
        ></v-autocomplete>
        </v-col>
    </v-row>
    </v-container>
</v-app>
</div>

这是我的 js

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    search: null,
    first: "",
    second: "",
        components: [
          'Autocompletes testOne', 'Comboboxes testTwo', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
        ],
            components2: [
          'Autocompletes2', 'Comboboxes2', 'Forms2', 'Inputs2', 'Overflow Buttons2', 'Selects2', 'Selection Controls2', 'Sliders2', 'Textareas2', 'Text Fields2', 
        ],

  },
  watch: {
    search(val){
      if(val){
        console.log(val)
      const temp = val.split(" ");
      console.log(temp)
        // this.components = [];
        // this.components2 = [];
        this.components.push(temp[0]);
        console.log(this.components);
        if(!temp[1]){
          return;
        }
         console.log(temp[1]);
        this.components2.push(temp[1]);
      this.first = temp[0];
      this.second = temp[1];
      console.log(this.second )
      }
      
    },
  },
})

这是控制台输出

Answer 1

您正在将与 v-model 绑定的属性更改为观察器中的搜索输入。这一行：

this.first = temp[0];

由于第一个属性与 v-model 绑定，它正在更改搜索输入。你会注意到如果你 select 一个只有一个词的项目不会发生，因为那个词将与 temp[0] 相同。

为什么我的 :search-input.sync 函数被调用了两次？

Why is my :search-input.sync function called twice?

javascript

synchronization

asynchronous

vue.js

vuetify.js