为什么选择的值在 v-autocomplete 中消失了？

Question

选择的值在 v-autocomplete 中消失。我为此使用了 vuetify v-autocomplete 组件。一旦我选择了一个值，然后当我单击另一个组件或继续该过程时，所选值就会消失。

<v-autocomplete
            :search-input.sync="search"
            append-icon="mdi-chevron-down"
            v-model="selectedCode"
            item-text="name"
            item-value="code"
            class="my-input"
            solo
            :items="items"
            label="select"
          >
            <template v-slot:no-data>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title> Type to filter</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-autocomplete>

data() {
    return {
      search: null
    };
  },


watch: {
    search(val) {
      this.festchData({
        search: val
      });
    }
  },

Answer 1

在这种情况下，我可以通过检查 watch() 中的几个值来解决这个问题。

<v-autocomplete
                  return-object
                  :loading="isloading"
                  clearable
                  append-icon="mdi-chevron-down"
                  v-model.lazy="trans.code"
                  solo
                  :search-input.sync="search"
                  class="transaction-input"
                  :items="merchantList"
                  :disabled="displayText
                  "
                  item-text="name"
                  item-value="code"
                  :label="displayText"
                  :rules="[rules.required]"
                >
                  
                </v-autocomplete>

watch: {
    search(val) {
  // if the search value is empty
  if (val === undefined || val === null || val.length === 0) {
 // make dataList empty
    this.makeDataListEmpty();
    this.isloading = false;
    return;
  }

  // Items have already been loaded
  if (this.dataList.length > 0) return;

  // Items have already been requested
  if (this.isloading) return;

  this.isloading = true;
  Promise.all([this.fetchData(val)]).finally(() => {
    this.isloading = false;
  });
}
  },

手表正在监听动作，每次执行动作时都会触发它。所以我们需要检查是否必须在特定时间过滤数据。