Having trouble using Vue v-show along with v-for to conceal a v-list menu

I have been attempting to hide an admin menu by utilizing the v-show directive. Even though the value of isAdmin is false in the code snippet below, the menu continues to be displayed. I have also experimented with using v-if, but it doesn't seem to 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 even attempted putting the v-show/if within the v-list-item element.

 <v-list-item v-if="isAdmin" v-for="item in adminItems">...</v-list-item>

In addition, the component employs Typescript's get method to create isAdmin as a computed property. When trying to access this in the template using {{ isAdmin }}, it correctly displays either true or false .

 get isAdmin() {
    return sessionStorage.getItem('isAdmin')
  }

If anyone could provide insight into what may be missing, it would be greatly appreciated.

Thank you for any assistance!

javascriptvue.jsconditional-rendering

Answer №1

Avoid using both v-if and v-for on the same element. It's better to apply v-if or v-show to a parent element instead.

View the 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; // Change `true` to `false` for different results.
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e0e3f3e2fff0efd6a6b8a7a2b8ae">[email protected]</a>/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>

Answer №2

Indeed, combining v-for with v-if or v-show is typically not recommended in Vue.js. However, I decided to experiment and found a workaround that actually worked for me.

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

To make it work, I placed the v-for directive on the outer v-list element and the v-if directive within the v-list-item element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the width of individual Views within a ScrollView to adjust accordingly in React Native

Is there a way to ensure that the Views inside my horizontal ScrollView have the same dimensions as the ScrollView itself? I'd like to implement paging so that swiping takes me to the next View within the ScrollView. I attempted using width : "100%" b ...

javascriptandroidreactjsreact-native

What is the best way to prevent two paths within an SVG from intersecting with each other?

Currently, I am developing a program that allows the user to draw lines. Once the user completes drawing a line, I receive an array of points in this format: [[x, y], [x, y], ...]. I then convert these points into a path string using the following functio ...

javascriptsvg

What is the best way to set up prettier in VSCODE so that it organizes jsx attributes across multiple lines?

My preference is for the following syntax: <input id="inputForEmail" type="email" className="form-control" aria-describedby="Enter email address" placeholder="Enter emai ...

javascriptreactjsjsxprettier

Hiding the C3 tooltip after engaging with it

I'm currently expanding my knowledge on utilizing C3.js for creating charts, and one aspect I'm focusing on is enhancing the tooltip functionality. Typically, C3 tooltips only appear when you hover over data points as demonstrated in this example ...

javascriptcsschartstooltipc3.js

Understanding the concept of promises in Angular

Currently, I am working with Angular and CoffeeScript. Within my codebase, there are three functions - getSomeData1(), getSomeData2(), getSomeData3() that need to be executed sequentially. The current implementation works perfectly for this requirement. ...

javascriptangularjscoffeescriptpromiseangular-promise

Creating an HTTP POST request using JavaScript

Hi there, I'm currently working on an analytical project that focuses on delay tolerance for different applications. To gather user feedback, I need to develop a portable application using JavaScript. The goal is to send a request to the HTTP server c ...

javascriptxmlhttprequesthttp-post

How can I unselect a radio button by double clicking on it?

I am in need of a specific feature: When a user clicks on a radio button that is already checked, I want it to become unchecked. I've attempted to implement this code but unfortunately, it has not been successful. $(document).on('mouseup' ...

javascriptjquery

How can I execute JavaScript code within Aptana Studio 3 IDE?

After creating a Test.js file, I added two lines of JavaScript code: var x = 5; console.log("The answer is: " + x); The desired output would be: "The answer is: 5" I am curious if there's a way to view this outcome in the Aptana Scripting console, ...

javascriptaptana3

The jQuery AJAX doesn't specify the complete server path in the URL

Hey friends, I could really use some help with this situation. It's driving me mad because I've successfully done it before, but now it just won't work. Here's the issue - I have an HTML button that triggers a JavaScript function when ...

javascriptjqueryajaxasp.net-mvc

Syntax error triggered and caught by ajaxError

I have implemented a client-side ajax error handler using the following code: $(document).ajaxError(processAjaxError); $.getJSON('/data.json'); In the server side, I have defined a function as shown below: def get(self): self.response.he ...

javascriptjqueryajax

Unable to modify page property status through the Notion API

I've been attempting to use the Notion JS-sdk to update a page's status using their API. However, I've run into some issues that I can't seem to resolve. Updating the status requires modifying the properties object, but no matter what ...

javascriptnode.jsnotion-api

Can you explain the functions of express.json() and express.urlencoded()?

I have been searching for information about the functions express.json() and express.urlencoded(), but I am struggling to find any detailed documentation. Can someone please explain what each of them does specifically? ...

javascriptnode.jsexpress

Implementing one-to-many relationships using Knex.js and Bookshelf.js in an ExpressJS/Postgres environment

When a user registers, I want to create a record on two tables simultaneously. user.js const db = require('../database'); const User = db.Model.extend({ tableName: 'login_user', hasSecurePassword: true, hasTimestamps: true, t ...

javascriptnode.jsexpressknex.jsbookshelf.js

What is the proper way to retrieve multiple property values stored in a property name using getJSON

I'm having trouble getting multiple languages to work in my code. Could someone assist me and provide guidance on how to write multiple choices for the property name language? When I input code like this to display only Dota 2 games in English, every ...

javascriptjsongetjson

What is the method for identifying the environment within an Express.js application?

Is there a reliable method for determining the environment in which an expressJS app is currently operating (development, test, production)? I have checked process.env, but found no clear indication of the environment. I know that variables can be set in ...

javascriptnode.jsexpress

Explore an array of elements to find the correct objectId stored in mongodb

element, I am faced with a challenge of searching through an array of objects to find a key that contains nested object id for populating purposes. Exploring My Object { service: 'user', isModerator: true, isAdmin: true, carts: [ ...

javascriptmongodbexpressmongoose

What could be causing my React function to be declared but not utilized?

Struggling with my React project, I hit a roadblock when trying to import my generalInput file into my App file. The error message stated that the generalInput was declared but never read. Desperate for a solution, I even turned to AI for help, but it too ...

javascriptreactjsjsx

Tips for effectively invoking functions upon a page being loaded?

I am currently working on adding pagination feature to manage the number of quotes displayed in my Vue.Js application. I have created a function that divides the quotes based on the paginationLimit value. However, I am encountering an issue where the updat ...

javascriptvue.js

Distinguishing between client side rendering and server side rendering is the backbone of web development

My goal is to give users the option to request webpages from my website either directly from the server or by clicking on links, which will be managed by Backbone's router. When a user requests a webpage directly from the server, they will receive a ...

javascripthtmlbackbone.jssingle-page-application

I need to incorporate a header into every single page of the document that I am currently working on using the Export2Doc() function

Can anyone help me with adding a header to my exported document? This is the JS code I'm using: After trying to add a header like this: <style> .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } </sty ...

javascripthtmljquerycss