Tips for emphasizing v-list-item on click (Vue)

I am currently working on a side menu that changes based on the selected router model. My goal is to have the selected page highlighted when clicked. I would like this functionality for all the submenus as demonstrated in this example.

Below are snippets of code representing the first two submenus in my project: View UI of the current menu design.

 <v-list-group sub-group :value="true">
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>General settings</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-if="
                (Router_Obj.is_individual_router == true ||
                  Router_Obj.is_individual_router == false) &&
                (routerDetail.router_model == 'FX20' ||
                  routerDetail.group_model == 'FX20')
              "
              value="true"
              @click="menu_change('Main Wi-Fi')"
            >
              <v-list-item-title>Main Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                routerDetail.router_model.substring(0, 4) == 'RG21' ||
                routerDetail.group_model.substring(0, 4) == 'RG21'
              "
              @click="menu_change('Main Wi-Fi')"
            >
              <v-list-item-title>Main Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                (Router_Obj.is_individual_router == true ||
                  Router_Obj.is_individual_router == false) &&
                (routerDetail.router_model == 'FX20' ||
                  routerDetail.group_model == 'FX20')
              "
              @click="menu_change('Guest Wi-Fi')"
            >
              <v-list-item-title>Guest Wi-Fi</v-list-item-title>
            </v-list-item>
            <v-list-item
              v-if="
                routerDetail.router_model.substring(0, 4) == 'RG21' ||
                routerDetail.group_model.substring(0, 4) == 'RG21'
              "
              @click="menu_change('Guest Wi-Fi')"
            >
              <v-list-item-title>Guest Wi-Fi</v-list-item-title>
            </v-list-item>

In attempting to implement class binding, I am struggling to come up with a solution using a single variable for all submenus. Introducing separate variables such as "isMainWifiActive" and "isGuestWifiActive" seems cumbersome. Is there a way to use one consistent variable across all submenus without creating multiple new ones?

Edit:

Following @DvidSilva's suggestion, I created an additional variable named "openMenu" to track which page is currently open. For instance, setting openMenu = "Main Wi-Fi". I utilized conditional class binding to apply the 'active' class when the openMenu matches the current page. Here is how one of my v-list-items is set up:

<v-list-item
      v-if="
        routerDetail.router_model.substring(0, 4) == 'RG21' ||
        routerDetail.group_model.substring(0, 4) == 'RG21'
      "
      :class="{'active': openMenu == 'Main Wi-Fi'}"

      @click="menu_change('Main Wi-Fi')"
    >
      <v-list-item-title>Main Wi-Fi</v-list-item-title>
    </v-list-item>
javascripthtmlcssvue.jsuser-interface

Answer №1

If you are using Vuetify 2.x, the component v-list-group includes a helpful property called active-class that applies when an item is selected. Check out the documentation for more information:

You have the flexibility to update this property and include your own custom CSS class, just like in the provided codepen example.

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

Issues with location forecasts and .getPlace() when utilizing the Google Maps loader for Place Autocomplete in Vue are causing functionality problems

After setting up a Vue 2 app using the vue cli, I noticed that when typing an address, no suggestions were populating from the dropdown. Checking the network tab, I observed the AutocompletionService.GetPredictions call triggering without any errors upon p ...

javascriptvue.jsgoogle-maps

In the JavaScript example provided, do child classes inherit their parent class prototype?

Here's the code I'm working with: class Rectangle { constructor(w, h) { this.w = w; this.h = h; } } Rectangle.prototype.area = function () { return (this.w * this.h); }; class Square extends Rectangle { construct ...

javascriptclassoopinheritanceprototype

Problem with the transform attribute in CSS

Having trouble rotating a div within another div. I tried using the transform property but it's not working as expected. I heard about another method which involves using :before pseudo-element, but I'm not sure what's wrong with that either ...

htmlcss

Configuring express for serving static CSS and JavaScript files

I'm currently facing issues with setting up the middleware of my application to serve static files like css and js. My goal is to include css and js files from the public directory in my index.html. You can view the current file structure here Below ...

htmlnode.jsexpress

How can a controller in AngularJS detect when the back button of the browser is pressed

I've created a browser trivia game where authenticated players can select a game type, triggering a socket.io event in my Node.js server. The view then transitions to a "Searching for game" screen with a loading icon as the server waits for enough pla ...

javascriptangularjsnode.js

Generate a dynamic chart using Angular-chart.js on a canvas that is created on the fly

I am facing an issue with displaying a chart or table in a div based on an XHR response. In the case of a chart, I want to replace the div contents with a canvas element that will be used by chart.js to show a graph. When I directly include the canvas ele ...

javascriptangularjschart.jsangular-chartist.js

Is there a way to extract the MIME type from a base64 string?

My base64 String appears as "UklGRkAdEQBXQVZFZm10IBIAAAABAAEAg...". I am attempting to download this file using my browser. Therefore, I convert it to a blob with the following function: b65toBlob: function(b64Data, sliceSize = 512) { ...

javascriptbase64mime-types

Passing a parameter to an AngularJS directive, which triggers the opening of an ngDialog, and subsequently updating the value to reflect changes in the root scope

Struggling with a persistent issue here; Essentially, I have a directive that triggers an ngDialog to open. This directive should be able to receive a variable from the root scope. The directive contains a click event that opens an ngDialog which then use ...

javascriptangularjsng-dialog

Repeating every 3 to 6 months on later.js commencing from a specified date

Currently, I am working on setting up recurring events every 3 and 6 months using the later.js library which can be found at https://github.com/bunkat/later. The code implementation looks like this: // Assuming my value.scheduled_date is set to 2018-09-0 ...

javascriptnode.jslaterjs

Is there a way to input data into an AngularJS modal?

I'm looking for some assistance : How do I go about loading data into the content of an angular modal? Is there a way to load custom data for a selected item? ............................................................. This is the code ...

javascriptjqueryangularjs

Error: Trying to access the 'previous' property of an undefined value

I keep encountering an error with functions in firebase: TypeError: Cannot read property 'previous' of undefined at exports.sendNotifications.functions.database.ref.onWrite (/srv/index.js:5:19) at cloudFunction (/srv/node_modules/firebase-functi ...

javascriptnode.jsfirebasevue.jsgoogle-cloud-functions

CSS compatibility across different browsers

Check out my jsFiddle for an example of an onHover event that changes the image. It's working perfectly in chrome, but not quite right in firefox. Any suggestions on how to fix it? Here's the jQuery function I'm using: $(document).ready(fu ...

javascriptjqueryhtmlcssfirefox

Tips for executing gulp tasks in the command line

As a newcomer to Gulp, I've encountered an issue with executing a task named task1 in my gulp.js file. When I enter "gulp task1" in the command line, it opens the gulp.js file in Brackets editor instead of running the task as expected. Can anyone offe ...

javascriptgulp

What is the process for configuring the global warning level in ESLint?

My current setup involves using WebStorm and the ESLint configuration provided by Airbnb. I'm curious if there is a way to have ESLint errors displayed in a more subtle manner instead of the harsh red color, or perhaps make all ESLint rules warnings ...

javascriptintellij-ideawebstormeslinteslint-config-airbnb

Is there a way to extract a value from a string and store it as a variable in

Creating a functionality to resize images from WordPress. The goal is to extract the width and height values from a string similar to this: <img src="/path/img.jpg" width="600" height="400" /> Next step is to remove the specific values (600 and 40 ...

phphtmlvariablessearch

Adjust the size of the image to fit within the div container following

<div id="homePage" style="position: relative; margin: 0px; width: 320px; height: 420px;"> <img id="userImg" src="images/5.jpg" width="100%" height="100%" onclick="imageClick()" style=" z-index: -1; margin: 0 ...

javascriptjqueryimagehtmlcss

While running the npm build, I encountered a mistake

https://i.stack.imgur.com/05GhH.png I transferred my Nuxt project to a Linux server using Git, then ran 'npm upgrade nuxt' and 'npm run build'. However, I hit a snag during the building process. What steps should I take next? Below is ...

node.jsvue.jsnpmnuxt.js

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

javascriptjqueryhtmlcss

Visuals derived from JSON information

Here is the JSON data retrieved from a web API: [{"FileName":"D:\\StuckUpTask\\Insta\\Insta\\Images\\/download (1).jpg"},{"FileName":"D:\\StuckUpTask\\Insta\\Insta\&bsol ...

javascriptangularjsjsonasp.net-web-apiscripting

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

javascriptjqueryhtmlcss