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;
    },
  }

Answer 2

Answering my question in depth in case anyone needs it -- with the help of my supervisor, I've figured out that 2 things were a problem in my code:

1. I've dumbly put the array in computed object (because -- correct me if I'm wrong -- as far as I know Arrays with custom types can't be defined in the data object, and anything in a computed block can't be mutated. So I moved the array to the same class the rest of my code was (where the ZChip elements are). I'm sure there is some better place to put the Array initialization other than where I put it but oh well.

2. In onClick, I had to use arrow function expression to call the function. This is how the code's been changed:

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

Where onCategorySelect looks like:

  private onCategorySelect(index: number): void {
    this.registerCategory[index].is_selected = !this.registerCategory[index].is_selected;
  }