'Vue v-show not working with v-for to hide v-list menu

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!

javascriptvue.jsconditional-renderingc++mockinggoogletestgooglemockgmock


Solution 1:[1]

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/[email protected]/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>

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rohìt Jíndal
Solution 2 Nebenzahl

Related Questions