小编Vik*_*ter的帖子

如何在 VueJS / Vuetify 组件中打开和关闭多个 v 菜单?

我使用 v-menu 创建多个弹出菜单;我的表中的每一行都有一个。我需要一种在单击提交时关闭菜单的方法。我无法使用 v-model="menu" 并使菜单为 false 或 true 来隐藏或显示菜单,因为当我将其设置为 true 时,每个菜单都会打开!有谁知道在不使用 v-model 的情况下关闭菜单的另一种方法吗?我找到了一种使用激活器插槽打开它的方法。也许有一个激活器插槽也可以关闭该组件?

<template v-slot:item.hours="{ item }">
        <v-menu
          :nudge-width="200"
          :close-on-content-click="false"
          offset-x
        >
          <template v-slot:activator="{ on }">
            <v-chip
              color="blue"
              dark
              v-on="on"
            >
              {{ parseFloat(item.hours).toFixed(1) }}
            </v-chip>
          </template>
          <v-form @submit.prevent="handleSubmitMenu(item)">
            <v-card class="px-5">
              <v-text-field
                label="Edit Hours"
                :value="item.hours"
                @input="updateHours"
              ></v-text-field>
              <v-card-actions>
                <SubmitButton />
              </v-card-actions>
            </v-card>
          </v-form>
        </v-menu>
      </template>

handleSubmitMenu(timeEntry) {
      const hours = this.hours
      this.menu = false
    },
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuetify.js v-slot

6
推荐指数
1
解决办法
1万
查看次数

标签 统计

javascript ×1

v-slot ×1

vue.js ×1

vuetify.js ×1