Наблюдатель v-autocomplete не работает должным образом - PullRequest
Новая
       5

Наблюдатель v-autocomplete не работает должным образом

0 голосов
/ 17 июня 2020

Мой наблюдатель не работает с моим 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, мой наблюдатель должен уловить это и распечатать a console.log, и он должен выполнять операторы функции.

console.log('searchCustomer', input); никогда не отображается, а остальная часть наблюдателя не выполняется.

1 Ответ

1 голос
/ 17 июня 2020

Попробуйте добавить .sync к атрибуту :search-input тега v-autocomplete: 

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