[Vuejs]-Disable v-menu when no item

by

0👍

You need a v-if condition for the entire menu like so

<v-menu v-if="menuitems.length > 0" min-width="225">  </v-menu>

When there are no menu items, or the menu items array.length is 0, then the menu panel will not be displayed

Checkout this code snippet, You need to store the menu items in an array for this to work. In the code snippet below, when you replace
items: ["Item1","Item2",] with items: []

Notice that the menu with the black background will not be displayed

var app = new Vue({
  el: "#menu",
  data () {
    return {
      items: [
        "Item1",
        "Item2",
      ]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="menu" id="menu">

  <ul style="background: black; color: yellow" v-if="items.length > 0">
     <li v-for="(item, index) in items" :key="index">{{item}}</li>
  </ul>
</div>

0👍

I used this solution, by adding a isAtLeastOneItemDisplayed() function :

<v-menu v-if="isAtLeastOneItemDisplayed()" min-width="225">                       
                        <template v-slot:activator="scope">
                            <v-btn small text color="primary" v-on="scope.on" :loading="actionLoading">
                                <v-icon>mdi-dots-vertical</v-icon>
                            </v-btn>
                        </template>
                        <v-list dense>
                            <v-list-item-group color="primary">
                                <v-list-item v-if="itemOneCondition()" @click="doSomething()">
                                    <v-list-item-content>
                                        <v-list-item-title>
                                            Item 1
                                        </v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                                <v-list-item v-if="itemTwoCondition()" @click="something()">
                                    <v-list-item-content>
                                        <v-list-item-title>
                                            Title 2
                                        </v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-list-item-group>                           
                    </v-menu>

isAtLeastOneItemDisplayed : function(){
            return this.itemOneCondition()
                || this.itemTwoCondition();
}

Leave a comment