Блог

У меня есть vuetify v-меню с условным элементом :

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

Бывает, что что-то каждый элемент не виден (каждое условие v-if равно false). Таким образом, в меню нет ни одного элемента.

В этом cas кнопка по-прежнему активна, и меню открывается без ввода :

Есть ли способ отключить кнопку, когда элемент не виден?

Вам нужно условие v-if для всего меню, например

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

Если нет пунктов меню или массив элементов меню.длина равна 0, панель меню отображаться не будет

Извлеките этот фрагмент кода, вам нужно сохранить пункты меню в массиве, чтобы это работало. В приведенном ниже фрагменте кода при замене items: ["Item1","Item2",] на items: []

Обратите внимание, что меню с черным фоном не будет отображаться

 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>  

Я использовал это решение, добавив isAtLeastOneItemDisplayed() функцию :

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