Как передать массив объектов в autobomplete материала vue

Фон

Я передаю массив объектов в автозаполнение материала, которое можно найти здесь .

Когда я выбираю элемент в списке при первом запуске ошибки, а затем, если я снова нажму на элемент, он выберет его, как ожидалось. Этот же процесс повторяется при каждом нажатии элементов автозаполнения.

Пример ошибки

[Vue warn]: Ошибка в обработчике событий для «ввода»: «TypeError: невозможно прочитать конструктор свойств« неопределенного »

Пример кода 

<template>
<md-autocomplete 
  v-model="customer"
  :md-options="customers" 
  @md-changed="getCustomers" 
  @md-opened="getCustomers"
  @md-selected="getSelected" 
>
</md-autocomplete>
</template>

<script>
data: () => ({
    customers: [],
    customer: "", // I also tried making this a {}
 }),
methods: {
getCustomers(searchTerm) {
  this.customers = new Promise(resolve => {
    if (!searchTerm) {
      resolve(this.GET_CUSTOMERS);
    } else {
      const term = searchTerm.toLowerCase();
      this.customers = this.GET_CUSTOMERS.filter(({ email }) => {
      email.toLowerCase().includes(term);
  });
    resolve(this.customers);
  }
  });
},


getSelected() {
     console.log(this.customer);
   },
}
</script>

Пример данных 

GET_CUSOTMERS: [
  { client_id: 1, email: "example@example.com" },
  { client_id: 2, email: "example@example.com" }
];

Вопрос

Что означает эта ошибка и как ее исправить? Я прочитал, что была ошибка в угловом использовании автозаполнения из материала, который через эту ошибку несколько лет назад, но я с оптимизмом смотрю, что это в настоящее время фиксируется, а не ошибка для материала vue.

Всего 1 ответ

Устранение ошибки

На основе исходного кода исходного кода searchTerm не undefined в вашем случае (отсюда и ошибка при доступе к constructor undefined ): 

// MdAutocomplete.vue: onInput()
if (this.searchTerm.constructor.toString().match(/function (w*)/)[1].toLowerCase() !== 'inputevent') {
         ^^^^^^^^^^

И searchTerm обычно равен его value : 

data () {
  return {
    searchTerm: this.value,
    //...
  }
},
watch: {
  value (val) {
    this.searchTerm = val
  },
  //...
},

... если не выбран элемент: 

selectItem (item, $event) {
  const content = $event.target.textContent.trim()
  this.searchTerm = content
  //...
}

Поэтому, когда возникает ошибка, вполне вероятно, что value MdAutocomplete каким-то образом undefined (из вашей v-model ), в результате чего searchTerm также не undefined . Когда вы выбираете элемент, searchTerm сбрасывается в текстовое содержимое выделения, и никаких ошибок не возникает.

Я не могу воспроизвести эти точные симптомы с помощью фрагмента кода в OP, но возникают, по-видимому, несвязанные ошибки: demo . Возможно, в этом вопросе отсутствуют существенные детали для воспроизведения проблемы.

Использование массива объектов для параметров md-autocomplete

  • Параметры md-options (т. this.customers здесь) должны возвращать массив строк, поэтому вам придется преобразовать массив объектов в ожидаемый формат (используя Array.prototype.map ): 

    this.customers = new Promise(resolve => {
  if (!searchTerm) {
    resolve(GET_CUSTOMERS.map(x => x.email));   // <-- map to `email` property
  } else {
    const term = searchTerm.toLowerCase();
    this.customers = GET_CUSTOMERS.filter(/*...*/).map(x => x.email);   // <-- map to `email` property
    resolve(this.customers);
  }
}

  • Array.prototype.filter вызов Array.prototype.filter должен возвращать Boolean для любой фильтрации. Следующая функция стрелки , используемая в качестве обратного вызова, ничего не возвращает: 

    GET_CUSTOMERS.filter(({ email }) => {
  email.toLowerCase().includes(term);
});

    Вы можете либо удалить скобки функции стрелки: 

    GET_CUSTOMERS.filter(({ email }) => email.toLowerCase().includes(term));

    или используйте оператор return : 

    GET_CUSTOMERS.filter(({ email }) => {
  return email.toLowerCase().includes(term);
});

демонстрационный (фиксированный)

Есть идеи?

10000