Question

我的观察者无法使用我的v-autocomplete，经过多次尝试，我没有找到任何解决方法。

<template>
  <v-app id="inspire">
    <v-content>
      <v-form ref="form" v-model="valid" :lazy-validation="lazy">
        <v-autocomplete
          v-model="editedItem.ref_customer"
          :search-input="searchCustomer"
          :loading="isLoading"
          :items="customerItems"
          color="white"
          hide-no-data
          hide-selected
          item-text="firstname"
          item-value="_id"
          label="Customer"
          placeholder="Start typing to search a Customer"
          prepend-icon="mdi-database-search"
          return-object
          no-filter
        />
      </v-form>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data: vm => ({
    customers: [],
    searchCustomer: null,
    isLoading: false,
    editedItem: {
      label: '',
      ref_shop: '',
      ref_customer: '',
      shop_order_id: '',
      status: '',
    },
  }),
  computed: {
    customerItems() {
      // this console.log works
      console.log('customerItems');
      return this.customers;
    },
  },
  watch: {
    searchCustomer: function(input) {
      // this console.log is never displayed
      console.log('searchCustomer', input);
      if (this.isLoading) {
        return;
      }

      this.isLoading = true;

      return this.$store
        .displatch('customers/get', input)
        .then(customers => {
          this.customers = customers;
          return customers;
        })
        .catch(err => {
          console.error(err);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
  mounted() {
    this.$store.dispatch('customers/get').then(customers => {
      this.customers = customers;
      // this console.log works
      console.log('found customers', this.customers);
    });
  },
};
</script>

当我键入v-autocomplete时，我的观察者应捕捉到该错误并打印console.log并执行函数语句。

console.log('searchCustomer', input);永远不会显示，其余的观察者也不会执行。

Answer 1

尝试将.sync添加到v-autocomplete标签的:search-input属性中：

   <v-autocomplete
      v-model="editedItem.ref_customer"
      :search-input.sync="searchCustomer"
      :loading="isLoading"
      :items="customerItems"
      color="white"

v-autocomplete监视程序无法按预期工作

1 个答案: