我太懂你这种头疼的感觉了——在Vue模板里用得顺顺的@click:append事件，转到TSX里写成on-click:append就直接罢工还报错，确实挺闹心的。

问题根源 #

Vue的JSX/TSX语法对自定义事件（尤其是带冒号命名空间的事件）的处理规则和模板不一样：不能直接照搬模板里的连字符+冒号格式，必须把事件名转换成驼峰式命名的处理函数。Vuetify的这些click:append类事件属于自定义命名空间事件，自然得遵循JSX的这套规则。

正确写法示例 #

把on-click:append改成onClickAppend就能解决问题，其他类似事件也按这个逻辑转换：

• 模板里的@click:append → TSX里的onClickAppend
• 模板里的@click:append-outer → TSX里的onClickAppendOuter
• 模板里的@click:prepend → TSX里的onClickPrepend

修改后的TSX代码：

protected render() {
  return (
    <li>
      {this.editingId === this.index ? (
        <div>
          <v-text-field 
            v-model={this.editingContent} 
            append-icon={'mdi-close'} 
            placeholder={this.item.text} 
            onClickAppend={this.save} // 这里换成驼峰式命名
          />
        </div>
      ) : (
        <div>
          <span>{this.item.text}</span>
          <v-icon x-small={true} nativeOn-click={this.edit}>mdi-pencil</v-icon>
        </div>
      )}
    </li>
  );
}

补充说明 #

如果TypeScript编辑器还报类型错误，大概率是Vuetify的TS类型定义没把这些驼峰式事件映射进去。这时候可以先用// @ts-ignore临时忽略类型检查，或者扩展Vuetify的组件类型来补充这些事件定义——不过大多数情况下，只需要转换事件名格式就能正常触发事件了。

内容的提问来源于stack exchange，提问作者Oliver Guo