Ошибка: [Vue warn]: неверный обработчик события «щелчок»: не определен
Я использую Vue 2 (синтаксис класса) и Typescript (синтаксис TSX), и я знаю, что этот вопрос задавали несколько раз, но ни один из ответов, которые я видел, не применим к моей собственной ситуации.
Я создал массив объектов и вывожу эти объекты как пользовательские элементы HTML, назовем их Chips. Chip принимает свойство selected как boolean.
Массив называется registerCategory, и каждый объект в массиве имеет name (в основном только его текст) и boolean, который я назвал is_selected, по умолчанию это false.
Хорошо, вот как я вывел свой массив
{this.registerCategory.map((field, index) => (
<ZChip
position = {'start'}
id = {'field-' + index}
value = {field}
selected = {this.registerCategory[index].is_selected}
onClick = {this.onCategorySelect(index)}
>
{this.$t(this.registerCategory[index].name)}
</ZChip>
))}
Это прекрасно выводит все элементы. Теперь моя проблема заключается в том, чтобы их выбирать по клику.
Я сделал эту функцию в отдельном файле registration.mixin.ts (это то же место, где массив определен в блоке computed):
methods: {
onCategorySelect(index: number): void {
this.registerCategory[index].is_selected = true;
},
}
Это должно изменить is_select, так как выбран только выбранный элемент boolean. Однако это дало мне:
[Предупреждение Vue]: неверный обработчик события «щелчок»: не определен
Любая помощь, решение или обходной путь очень ценятся. Спасибо. :)
@MoritzRingler казалось, что он выполняется сразу, а не по щелчку. я должен попытаться сделать функцию асинхронной? Но почему вы думаете, что он не выполняется ТОЛЬКО по клику?
Если сделать функцию асинхронной, способ ее вызова здесь не изменится. Я предполагаю, что это должно быть что-то onClick = {'onCategorySelect(' + index + ')'}, но это может быть настолько глупо, насколько это выглядит, я не знаком с TSX.
@MoritzRingler, ха-ха, нет проблем, но чего ты пытаешься достичь этим прохождением? например, зачем передавать пробелы / как это будет выглядеть в обычном синтаксисе vue и js? Я попробую применить его к синтаксису TSX
Обычно вы передаете строку onCategorySelect(index), и компилятор шаблона Vue определяет, что onCategorySelect — это метод компонента, а index — переменная в текущей области. Затем он создает обратный вызов для события click.
@MoritzRingler Ах, нет, с TSX он обычно работает с синтаксисом, который я использовал. Я использую onClick все время, как в вопросе, проблема возникает только с этим чертовым ZChip, и он выбран boolean. В любом случае, я пытался передать его как строку по-вашему, в любом случае это не имело значения. Однако, спасибо
Ответы 2
Вы уже разобрались? Я не могу это проверить, но я уверен, что это работает, это соответствует тому, как индексы обрабатываются в React (на самом деле):
methods: {
onCategorySelect(index: number): void {
() => this.registerCategory[index].is_selected = true;
},
}
Я понял это, но вы в основном правы! Однако я сделал выражение функции стрелки внутри onClick, поскольку другая часть проблемы заключалась в том, что я поместил массив в блок computed, а вычисляемые массивы не могут быть изменены. Я подробно описал это в своем собственном ответе, если вам интересно, но выбрал свой как правильный, потому что он также работает и имеет ту же идею, и вы старались изо всех сил помочь, так что спасибо! :')
Подробно отвечая на мой вопрос на случай, если это кому-то понадобится - с помощью моего руководителя я понял, что в моем коде были проблемы с двумя вещами:
Я тупо поместил массив в объект
computed(потому что -- поправьте меня, если я ошибаюсь -- насколько я знаю, массивы с пользовательскими типами не могут быть определены в объектеdata, а что-либо в блокеcomputedможет' t быть мутированным. Поэтому я переместил массив в тот же класс, что и остальная часть моего кода (где находятся элементыZChip). Я уверен, что есть какое-то лучшее место для инициализации массива, отличное от того, куда я его поместил, но да ладно .В
onClickмне пришлось использовать выражениеarrow functionдля вызова функции. Вот как был изменен код:{this.registerCategory.map((field, index) => ( <ZidChip position = "start" id = {'field-' + index} value = {field} selected = {this.registerCategory[index].is_selected} onClick = {() => this.onCategorySelect(index)} > {this.$t(this.registerCategory[index].name)} </ZidChip> ))}
Где onCategorySelect выглядит так:
private onCategorySelect(index: number): void {
this.registerCategory[index].is_selected = !this.registerCategory[index].is_selected;
}
Похоже, функция выполняется немедленно, и вы получаете либо
:onClick=undefined(приводит к недопустимой ошибке обработчика), либо:onClick = "true"(приводит к тому, что handler.apply не является функцией). Просто предположение, хотя