我在表格列中有一个菜单对话框,用于更新相应的值。
菜单对话框在打开时显示带有选择框和更新按钮的卡。
使用v-on
激活了菜单,该菜单的工作完全符合预期,但是我无法关闭菜单。
由于它位于表中,因此使用v-model
并更改该值会导致显示多个菜单/选择框。
<v-menu :close-on-content-click="false" :close-on-click="false">
<template v-slot:activator="{ on: { click } }">
<v-chip @click="click" small>{{item[header.value]}}</v-chip>
</template>
<v-card>
<!-- <v-card-title class="subtitle-2 pb-0 pt-1">Update Status</v-card-title> -->
<v-select items="Status" class="px-4 pb-2" hide-details label="Status"></v-select>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn color="primary" @click="" text>Update</v-btn>
<v-btn color="warning" text>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-menu>
如何在不使用v模型的情况下关闭菜单?
答案 0 :(得分:1)
这是一个简单的解决方案...
我在菜单对话框中添加了一个v模型,并在数据display: {}
中创建了一个对象。菜单对话框上的v模型是v-model="display[item.id]"
,使用项目ID作为种类的索引,然后我可以使用一种方法将其关闭。
close(id) {
this.display[id] = false;
},
完成。