javascript - How do I open and close multiple v-menus in my VueJSVuetify component? - Stack Overflow

admin管理员组

文章数量:1277875

I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the ponent, as well?

<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
    },

I create multiple popover menus with v-menu; one for each row in my table. I need a way for the menu to close when I click submit. I cannot use v-model="menu" and make menu false or true to hide or show the menu because then every menu will open when I set it to true! Does anyone know another way to make the menu close, without using v-model? I have found a way to open it using the activator slot. Perhaps there is an activator slot that will close the ponent, as well?

<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
    },

• javascript
• vue.js
• vuetify.js
• v-slot

Share Improve this question Follow asked Apr 12, 2020 at 17:38 VikingBarristerVikingBarrister 10911 gold badge33 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Just add v-model for each row.

<v-menu v-model="item.menu">

EDIT you also can use $refs just add it to v-menu and call save() to close it.

  <v-menu ref="menu" top offset-y :close-on-content-click="false">
    <template v-slot:activator="{ on }">
      <v-btn
        color="primary"
        dark
        v-on="on"
      >
        Activator
      </v-btn>
    </template>
    <v-btn @click="$refs.menu.save()"></v-btn>
  </v-menu>

本文标签： javascriptHow do I open and close multiple vmenus in my VueJSVuetify componentStack Overflow