What is the best way to dynamically apply the "active" class to a link when it is clicked

Here is how my vue component looks:

<template>
    <div>
        ...
        <div class="list-group">
            <a :href="baseUrl+'/message/inbox'" class="list-group-item">
                Message
            </a>
            <a :href="baseUrl+'/message/review'" class="list-group-item">
                Review
            </a>
            <a :href="baseUrl+'/message/resolution'" class="list-group-item">
                Resolution
            </a>
        </div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                baseUrl: window.Laravel.baseUrl
            }
        },
        ...
    }
</script>

After clicking a link and reloading the page, I want to add an 'active' class to that clicked link. However, I am unsure of how to achieve this. Can anyone provide guidance?

javascriptvue.jsvuejs2vue-component

Answer №1

To achieve a dynamic styling effect, consider implementing a computed property named currentPath:

computed: {
  currentPath () {
    // Retrieve the current URL and extract the path after 'baseUrl'
    // For example, '/message/inbox' or '/message/review'
    return '/message/inbox'
  }
}

Add a CSS class for the unique style you desire:

.active-item {
  /* Add your specific CSS rules here */
}

In your template, assign the class to the corresponding item based on conditions:

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active-item': currentPath === '/message/inbox'}">
   class="list-group-item">Message</a>
<a :href="baseUrl+'/message/review'"
   :class="{ 'active-item': currentPath === '/message/review'}">
   class="list-group-item">Review</a>

For more information, refer to the documentation on binding HTML classes with object syntax

Answer №2

In addition to Leo's solution, consider implementing a component that can automatically detect its active state. This will eliminate the need for multiple <a> tags with redundant attributes.

Let's take an example of a <custom-link> component:

<custom-link href="/profile/settings" class="nav-item">
  Settings
</custom-link>
<custom-link href="/profile/edit" class="nav-item">
  Edit Profile
</custom-link>
<custom-link href="/profile/messages" class="nav-item">
  Messages
</custom-link>

If you do not plan on reusing this component or if the necessity of the nav-item class is consistent, you can also include it within the <custom-link>. This approach enhances readability:

<custom-link href="/profile/settings">Settings</custom-link>
<custom-link href="/profile/edit">Edit Profile</custom-link>
<custom-link href="/profile/messages">Messages</custom-link>

The code for the custom-link component may look like this:

<a
  :href="baseURL + href"
  :class="{ active: isActive }"
  class="nav-item"
>
  <slot></slot>
</a>

{
  props: ['href'],
  data: () => ({ baseURL: window.Laravel.baseURL }),
  computed: {
    isActive () {
      return location.href === this.baseURL + this.href
    }
  }
}

I have directly used location.href here, but you can opt for a computed property as per the need for any additional URL computations, just like in Leo's 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

The jQuery target is not able to locate the specified element

Why does this code snippet work in one case: jQuery(this).closest("li").find("p").text(); But when enclosed within a function, it fails to produce the desired result: jQuery.each(words, function(i, v) { jQuery(this).closest("li").find("p").text(); } ...

javascriptjquery

The event in Vue.js does not trigger for items that have been filtered out of the list

I currently have a list of items, each with a "complete" flag. Depending on the value of this flag, the item is displayed in either view A or view B. These items are fetched through an API request and then filtered client-side using a computed method based ...

vue.jseventsfilterclient

Creating a clone of JSON for use as a template

I am working with a json template that I fill with product data. Here is an example of the json structure: // product template $scope.productAttributes = { "Code": null, 'Attributes': {} }; When a user inputs produ ...

javascriptjsonangularjs

Use jQuery to dynamically update a text field within a table row based on a selection from

My understanding of JS and jQuery is not very strong. This is the HTML Output I created using a foreach-loop: $('#ProjectOfferPosition0IsystemTypeVariantId').on('change', function () { var prices = []; prices[1] = 500.00; ...

javascriptphpjquerycakephp

Is there a method to categorize an array of objects by a specific key and generate a new array of objects based on the grouping in JavaScript?

Suppose I have an array structured like this. It contains objects with different values but the same date. [ { "date": "2020-12-31T18:30:00.000Z", "value": 450 }, { "date": "20 ...

javascriptarraystypescriptarraylistgrouping

Guide on implementing text/ng-template script section in jsfiddle

My current challenge involves creating a jsfiddle that utilizes AngularJS to display two calendar controls. While my code functions properly when run locally, I've encountered an issue with including the template code via a script tag on jsfiddle: ht ...

javascriptangularjsjsfiddle

Map failing to refresh

Having some trouble with the map function as it's not updating my select box with the new selected value. The issue occurs within a material UI dialog that appears when viewing a file. I notice that the values get updated only after closing and reopen ...

javascriptreactjsmaterial-uireact-functional-component

The deep linking feature may fail to function properly when using a redirect URL

Hello there! So I've been using Capacitor with VueJS and everything is running smoothly, except for one small hiccup. My deep link functions perfectly fine, but it seems to hit a roadblock when it's a redirect URL. My goal is to integrate oauth2 ...

vue.jsdeep-linkingcapacitor

There was an issue with the v-on handler: "An error occurred because it was unable to read properties of an undefined value (specifically 'input')."

Can anyone help me? When I click the icon inside the avatar, I want to select a file. But I'm getting an error: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input'). Could anyone help me? <v-row v-for=" ...

javascriptvue.jsvuetify.js

Using Polymer in Chrome Extension content script

Currently, I am experimenting with incorporating Polymer into a chrome extension. My main objective is to take advantage of styling encapsulation in order for my content scripts to operate independently from the CSS on the visited webpage. To begin, I hav ...

javascripthtmlgoogle-chrome-extensionpolymer

Examine the syntax of JavaScript

I've been digging into a piece of code written by another person. My focus is on uncovering the JavaScript function that executes when the link below is clicked.... <a href="#subtabs_and_searchbar" id="finish_counting" onclick="$(' ...

javascriptjquery

Transferring properties from React Router to child components on the server side

For my Isomorphic app using React, react-router v3, and material-ui, it's crucial to pass the client's user agent to the theme for server-side rendering. This is necessary for MUI to properly prefix inline styles. Initially, the root component o ...

javascriptreactjsreact-routermaterial-ui

Using assert along with exceptions in code can provide additional error handling capabilities

I recently began using Protractor in combination with Mocha and Chai. I've reached a point where I have performed some asserts like: const attributes = await TestingModal.getButtonAttributes(driver, myCss) assert.equal(attributes.text, 'Tes ...

javascriptseleniumprotractormocha.jschai

Tips for cutting down on bundle size in your WEBPACK setup when using VUEJS

I have tried numerous tutorials to reduce the size of my bundle, but none of them seem to be affecting the bundle size and I can't figure out why. Every time I integrate new code into webpack, the bundle size remains unchanged. (The application is c ...

javascriptvue.jswebpackwebpack-4

Obtain the index of a selected option in a Select Tag using Node.js/Express

When you make a POST request with a form in Node.js/Express For example: <select name="selectname"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3"> ...

javascriptnode.jsformsexpress

Sorting through JSON information based on specific attributes and criteria

Consider this JSON object: { 'name' : 'John', 'friends' : [ { 'id' : 1, 'name' : 'George', 'level' : 10 }, { 'id' : 2, 'name ...

javascriptjsonangularjs

How to import an HTML file using TypeScript

I need to load an html file located in the same directory as the typescript file and return it from the function. public ...(... ) : angular.IHttpPromise<string> { ... return $http({ method: 'GET', url: &apos ...

javascriptangularjstypescript

Extract information from various files stored in Firestore

I have been struggling to retrieve data from multiple documents despite numerous attempts. The screenshot below displays that I have a collection of 3 documents, and my inquiry is how to extract data from each of them. https://i.stack.imgur.com/bFrIG.png ...

javascriptgoogle-cloud-firestoreforeachdata-retrieval

Adjust padding of elements based on scrolling movements

Currently, I am attempting to adjust the padding of a specific element based on how far down the page the user scrolls. Ideally, as the user scrolls further down the page, the padding will increase, and as they scroll back up, the padding will decrease. H ...

javascriptjqueryhtmlcss

Tips for injecting animation into a DIV

I am trying to make a <div> element on my webpage expand to the full width and height of the screen. While I have managed to achieve this, I also want to implement an animation that will be displayed when the <div> enlarges to fit the screen si ...

javascriptjquery