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

Question

I'm using Vue 2 (class syntax) and Typescript (TSX syntax) and I know this question has been asked a few times but none of the answers I've seen have applied to my own situation.

I've created an object array and I'm outputting these objects as custom HTML elements, let's call them Chips. A Chip takes the property 'selected' as a boolean.

The array is called registerCategory and each object in the array has a name (basically just its text) and a boolean i called is_selected whose default is false.

Alright, here's how I've outputted my Array

  {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>
  ))}

This outputs all the elements wonderfully. My issue now is getting them to be selected on click.

I've made this function in a separate registration.mixin.ts file (which is also the same place the array is defined in a computed block):

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

This should change the is_select as only the selected element's selected boolean. However, that gave me:

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

Any help, solution, or work-around is greatly appreciated. Thanks. :)

Answer 1

Did you figure it out already? I can't test it, but I am pretty sure this works, it matches how indexes are handled in React (afaik):

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