vuejs2 - Vuetify - 关闭没有 v-dialog 的菜单对话框(使用激活器)
问题描述
我在表格列中有一个菜单对话框来更新相应的值。
打开时的菜单对话框显示带有选择框和更新按钮的卡片。
菜单使用v-on
完全按预期工作,但我无法关闭菜单。
由于它在表格内,因此使用 av-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-model 的情况下关闭菜单?
解决方案
这是一个简单的解决方案...
我在菜单对话框中添加了一个 v-model 并在 data 中创建了一个对象display: {}
。菜单对话框上的 v-modelv-model="display[item.id]"
使用项目 ID 作为排序索引,然后我可以使用一种方法来关闭它。
close(id) {
this.display[id] = false;
},
完毕。
推荐阅读
- mongodb - MongoDB Stitch 的导入/导出中是否包含依赖项?
- git - 如何使用 pre-push git hook 来检查本地和远程分支之间的某些文件或目录是否不同?
- excel - 如何从“水平”单元格范围填充组合框?
- asp.net-core - Asp.ner Core App 的 wwwroot/storage 文件夹的持久卷
- ios - 对协议关联类型的可选强制转换失败(返回 nil)
- spring-boot - 使用 jar 在 prod 上运行 maven 命令
- java - JSTL foreach 显示 var 名称而不是它的值
- java - 如何使用片段转换为视图或按钮设置动画?
- r - 使用 LMER 对按组和时间嵌套的相互作用效应进行纵向分析
- moodle - 持续的“从数据库读取错误”错误