Vuetify - 关闭没有 v-dialog 的菜单对话框（使用激活器）答案

【问题标题】：Vuetify - Close menu dialog with out v-dialog (using activator)Vuetify - 关闭没有 v-dialog 的菜单对话框（使用激活器）
【发布时间】：2020-12-13 17:47:13
【问题描述】：

我在表格列中有一个菜单对话框来更新相应的值。

菜单对话框打开时显示带有选择框和更新按钮的卡片。

菜单是使用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-model 的情况下关闭菜单？

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

这是一个简单的解决方案...

我在菜单对话框中添加了一个 v-model，并在数据 display: {} 中创建了一个对象。菜单对话框上的 v-model 是 v-model="display[item.id]" 使用项目 id 作为排序索引，然后我可以使用一种方法来关闭它。

close(id) {
      this.display[id] = false;
    },

完成。

【讨论】：