Vue2类语法+TSX中ZChip点击事件报错及选中状态实现问题

1. 修复点击事件警告（Invalid handler for event "click": got undefined） #

你当前的onClick={this.onCategorySelect(index)}写法会立即执行onCategorySelect方法，返回undefined作为点击事件处理器，这就是警告的根源。需要传递函数引用而非执行结果，改成箭头函数包裹即可：

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

2. 解决选中状态不更新的响应式问题 #

直接修改computed返回数组的元素属性存在两个核心问题：computed属性依赖缓存，直接修改返回值无法触发更新；若computed返回新创建的对象数组，修改元素属性会被computed的重新计算覆盖。以下是可行方案：

方案一：独立存储选中状态，通过computed合并 #

1. 在mixin的data中添加选中状态存储：

data() {
  return {
    selectedMap: {} as Record<number, boolean> // 用对象记录每个索引的选中状态
  }
}

2. 修改registerCategory的computed逻辑，合并选中状态：

computed: {
  registerCategory() {
    // 替换为你实际的数据源，比如从props或其他状态获取
    return this.sourceCategories.map((item, index) => ({
      ...item,
      is_selected: this.selectedMap[index] || false
    }))
  }
}

3. 更新点击方法，确保响应式更新：

methods: {
  onCategorySelect(index: number): void {
    // 使用Vue.$set保证对象属性的响应式
    this.$set(this.selectedMap, index, !this.selectedMap[index])
  }
}

方案二：将registerCategory移至data（若无需computed） #

如果registerCategory不需要基于其他数据计算，直接放在data中：

data() {
  return {
    registerCategory: [
      // 初始化你的对象数组，每个包含name和is_selected: false
    ]
  }
}

点击方法修改为切换选中状态，用$set确保响应式（若对象初始化已有is_selected，直接修改也可，但$set兼容性更强）：

methods: {
  onCategorySelect(index: number): void {
    this.$set(this.registerCategory[index], 'is_selected', !this.registerCategory[index].is_selected)
  }
}

内容的提问来源于stack exchange，提问作者nouf alsalem