Question

我目前正在将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-width="200">
                            <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事件上的对话框？

Answer 1

尝试破坏on插槽道具，然后运行破坏了click的{{1}}事件：

click:close

受this answer启发

在vuetify中为v对话激活器使用自定义事件

1 个答案: