Фон
Я передаю массив объектов в автозаполнение материала, которое можно найти здесь .
Когда я выбираю элемент в списке при первом запуске ошибки, а затем, если я снова нажму на элемент, он выберет его, как ожидалось. Этот же процесс повторяется при каждом нажатии элементов автозаполнения.
Пример ошибки
[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-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);
});