I am trying to hide an admin menu using v-show. In the code below the isAdmin value is false, yet the menu still shows. I have also tried v-if but that doesn't work either.
<v-list v-show="isAdmin">
<v-list-item v-for="item in adminItems" :key="item.title" @click="handleNavigtion(item)" router>
<v-list-item-action class="pr-1 pl-2 mr-1">
<v-icon :class="activeMenuItem.includes(item.title) ? 'blue--text' : ''" :title="item.title">
{{ item.icon }}
</v-icon>
</v-list-item-action>
<v-list-item-content :class="activeMenuItem.includes(item.title) ? 'blue--text' : ''">
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
I also tried with the v-show/if inside the v-list-item element.
<v-list-item v-if="isAdmin" v-for="item in adminItems">...</v-list-item>
Additionally, the component uses Typescript's get for making isAdmin a computed property. When I try to access this in the template using
{{ isAdmin }} the value displays either true or false correctly.
get isAdmin() {
return sessionStorage.getItem('isAdmin')
}
Can anyone tell me what I am missing?
Thanks for any help!
You can't really use v-if and v-for on the same element. Best to put the v-if or v-show on a parent element.
Working Demo :
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data: {
adminItems: [{
title: 'abc',
icon: 'Icon 1'
}, {
title: 'def',
icon: 'Icon 2'
}],
activeMenuItem: ['abc', 'def']
},
computed: {
isAdmin() {
return true; // Replace `true` with `false` to see the changes.
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<div id="app">
<v-list v-show="isAdmin">
<v-list-item v-for="item in adminItems" :key="item.title" @click="handleNavigtion(item)" router>
<v-list-item-title v-text="item.title"></v-list-item-title><br>
</v-list-item>
</v-list>
</div>Yes, it is not possible to use v-for together with v-if or v-show. But I tried something and it worked.
<v-list dense nav v-for="(item, i) in items" :key="i">
<v-list-item
dense
:to="item.url"
:exact="true"
v-if="mixPermissao($options.name, item.name)"
>
<v-list-item-icon>
<v-icon :color="item.color">{{ item.icon }} </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
I put the v-for in the v-list and the v-if in the v-list-item and it worked.