在 vuetify 中为 v-dialog 激活器使用自定义事件

Posted 2023-02-23

【中文标题】在 vuetify 中为 v-dialog 激活器使用自定义事件

【英文标题】：Using a custom event for a v-dialog activator in vuetify

【发布时间】：2021-02-01 08:38:39

【问题描述】：

我目前正在将 Vuetify 用于具有一系列 v-dialog 组件的应用程序。

我目前有：

                    <template v-if="topic">
                        <v-dialog v-model="removeTagDialogs[removeTagDialogs.indexOf(tag.id)]" v-for="(tag, iii) in topic.tags" :key="iii" persistent max->
                            <template v-slot:activator=" on, attrs ">
                                <v-chip close color="primary" text-color="white" class="mr-1" v-bind="attrs" v-on="on"> tag.name.en </v-chip>
                            </template>

                            <v-card>
                                <v-card-title class="error--text text-center">Remove Tag?</v-card-title>
                                <v-card-actions>
                                    <v-btn color="error" @click="removeTagDialogs[removeTagDialogs.indexOf(tag.id)] = false">Cancel <v-icon small color="white">mdi-cancel</v-icon></v-btn>
                                    <v-btn color="error" @click="removeTag(tag.id)">Remove <v-icon small color="white">mdi-delete</v-icon></v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-dialog>
                    </template>

效果很好，但是只有当我点击徽章组件的主要部分而不是关闭图标时才会启用对话框。我需要将其更改为另一种方式，即按下关闭图标时打开对话框。

我尝试修改v-on 属性以直接使用click:close 事件但是它不起作用。

<v-chip close color="primary" text-color="white" class="mr-1" v-bind="attrs" v-on="click:close"> tag.name.en </v-chip>

如何修改它以打开click:close 事件的对话框？

【参考方案1】：

尝试破坏 on 插槽属性，然后运行已破坏的 click 作为 click:close 事件的处理程序：

<template v-slot:activator=" on:  click , attrs ">
     <v-chip ... @click:close="click"> tag.name.en </v-chip>
</template>

灵感来自this answer

【讨论】：

那没有影响。