How to show only one v-menu at a time when clicking to show the menu

espc 0
Viewed 41

I've ran the v-for loop on v-menu and I am trying to open the v-menu with only using the button.

The thing I am trying to accomplish is that I wanna open one menu at a time when clicking the button. Currently, it's showing every button and I believe because the v-menu itself's v-model is bind to a value so every v-menu that loops is looking at the value and when the value changes the entire v-menu shows up.

https://codepen.io/esphoenixc/pen/ExEMOYE

Here's my copepen and below is my code

<div id="app">
  <v-app id="inspire">
    <div class="text-center d-flex align-center justify-space-around mt-16">
      <v-menu :open-on-hover="true" :open-on-click="true" v-for="user in userInfo" nudge-top="50px" v-model="show" top>
        <template v-slot:activator="{ on, attrs }">
          <v-avatar v-on="on" size="24" color="blue">
            <span>{{user.name}}</span>
          </v-avatar>
        </template>

        <span>{{user.favoriteFood}}<span>
      </v-menu>

      <v-btn @click="showTooltip">Button</v-btn>
  </v-app>
</div>

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      userInfo: [
        {
          id: 1,
          name: "a",
          favoriteFood: "hamburger"
        },
        {
          id: 2,
          name: "b",
          favoriteFood: "spaghetti"
        },
        {
          id: 3,
          name: "c",
          favoriteFood: "Pasta"
        },
        {
          id: 4,
          name: "d",
          favoriteFood: "Pizza"
        },
        {
          id: 5,
          name: "e",
          favoriteFood: "BBQ"
        },
        {
          id: 6,
          name: "f",
          favoriteFood: "Philly Cheese Steak"
        }
      ],
      show: false
    };
  },

  methods: {
    showTooltip() {
      console.log("Open tooltip");
      this.show = true;
    }
  }
});


So how can I only show one v-menu at a time when the button is clicked? I feel like I need to do something with the id values that's given but I can't seem to figure out the syntax or how to approach to solve the issue.
vuetify.js vue.js javascript html
1 Answers

Observation : You are binding same boolean value for all the v-menu model which results updating this.show is impacting all the v-menu.

Workaround : Assign show property in each menu object. So that it will work separately for each v-menu

mounted() {
  this.userInfo = this.userInfo.map(obj => {
    obj.show = false;
    return obj;
  });
}

In that case, Your template v-model will be : v-model="user.show"

Rohìt Jíndal0
Related