vuetify @click:append 在 tsx 中不起作用

Question

我尝试用 vue+vuetify + typescript(tsx) 构建项目，但是 @click:append 在 tsx 中不起作用。

vuetify 代码：

<v-text-field
            v-model="message"
            :append-icon="marker ? 'mdi-map-marker' : 'mdi-map-marker-off'"
            :append-outer-icon="message ? 'mdi-send' : 'mdi-microphone'"
            :prepend-icon="icon"
            @click:append="toggleMarker"
            @click:append-outer="sendMessage"
            @click:prepend="changeIcon"
            @click:clear="clearMessage"
          ></v-text-field>

tsx 代码：

protected render() {
        return (
            <li>
                {this.editingId === this.index ?
                    (<div>
                        {/* tslint:disable-next-line:max-line-length */}
                        <v-text-field v-model={this.editingContent} append-icon={'mdi-close'} placeholder={this.item.text} on-click:append={this.save}/>
                        {/*<v-text-field><v-icon color={'red'} slot={'append'}>mdi-close</v-icon></v-text-field>*/}
                    </div>)
                    : (<div>
                            <span>{this.item.text}</span>
                            <v-icon x-small={true} nativeOn-click={this.edit}>mdi-pencil</v-icon>
                        </div>)
                }
            </li>
        );
    }

@click:append => on-click:append={this.save}，不起作用并显示错误。我该如何解决？

Answer 1

on-click:append => { ...{ on: { 'click:append': handler } }。 像这样：

<v-text-field v-model={this.editingContent} append-icon={'mdi-close'} placeholder={this.item.text}  {...{on: {'click:append': this.save}}}/>

感谢 vuetify discord 社区。​​p>