Estoy tratando de ocultar un menú de administración usando v-show . En el código a continuación, el valor de isAdmin es falso, pero el menú aún se muestra. También probé v-if pero tampoco funciona.
<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> También probé con v-show/if dentro del elemento v-list-item .
<v-list-item v-if="isAdmin" v-for="item in adminItems">...</v-list-item> Además, el componente usa get de Typescript para hacer que isAdmin una propiedad calculada. Cuando intento acceder a esto en la plantilla usando {{ isAdmin }} , el valor muestra true o false correctamente.
get isAdmin() { return sessionStorage.getItem('isAdmin') }¿Alguien puede decirme lo que me estoy perdiendo?
¡Gracias por cualquier ayuda!
Realmente no puedes usar v-if y v-for en el mismo elemento. Lo mejor es poner v-if o v-show en un elemento principal.
Demostración de trabajo:
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>Sí, no es posible usar v-for junto con v-if o v-show. Pero probé algo y funcionó.
<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>Puse el v-for en la v-list y el v-if en el v-list-item y funcionó.