typescript - 错误: [Vue warn]: Invalid handler for event "click": got undefined

Question

我正在使用 Vue 2(类语法)和 Typescript(TSX 语法)，我知道这个问题已被问过几次，但我看到的答案都不适用于我自己的情况。

我创建了一个对象数组，并将这些对象作为自定义 HTML 元素输出，我们将它们称为 Chips。 Chip 将属性“selected”作为 boolean。

该数组称为registerCategory，数组中的每个对象都有一个名称(基本上只是其文本)和一个 bool 值，我称为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 文件中创建了此函数(这也是在 compulated block 中定义数组的同一位置):

  methods: {
    onCategorySelect(index: number): void {
      this.registerCategory[index].is_selected = true;
    },
}

这应该将 is_select 更改为仅选定元素的选定 boolean。然而，这给了我:

[Vue warn]: Invalid handler for event "click": got undefined

非常感谢任何帮助、解决方案或解决方法。谢谢。 :)

Answer 1

你已经弄清楚了吗？我无法测试它，但我很确定这是有效的，它与 React 中处理索引的方式相匹配(据我所知):

  methods: {
    onCategorySelect(index: number): void {
      () => this.registerCategory[index].is_selected = true;
    },
  }