Disable v-menu when no item - vue.js

Question

I've got a vuetify v-menu, with conditionnal item :
<v-menu 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>
It happens that something every item is not visible (every v-if conditions are false). So the menu hasn't any item.
In this cas, the button is still activ, and a menu is opened with no entry :
Is there a way to disable the button when no item are visible ?

Answer 1

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>

Answer 2

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();
}