What is the best way to apply linkActiveClass in v-link based on the routerName or a combination of path and query

I am facing an issue with two v-links that look like this:

    '/accountList?accountType=1': {
        name: 'accountList1',
        component: require('./../views/finance/accountList.vue')
    },
    '/accountList?accountType=2': {
        name: 'accountList2',
        component: require('./../views/finance/accountList.vue')
    },

 <li><a v-link=" { name: 'accountList1', exact: true }   "><span>test1</span></a></li>
 <li><a v-link=" { name: 'accountList2', exact: true }   "><span>test2</span></a></li>

When I click on one of them, both are given the linkActiveClass.

https://i.stack.imgur.com/bet9P.jpg

My current problem is: how can I control the active status based on routerName or path AND query?

PS: The usage of exact: true here is incorrect and does not apply in this context.

vue.jsvue-router

Answer №1

I have identified two possible solutions in this particular scenario

  1. Aside from the routerName, you should also compare query parameters which can be accessed using: this.$route.query.accountType
  2. Another approach is to compare $route.fullPath which contains the complete URL with query and hash.

I find it puzzling why these two routes are different; ideally they should be the same route with distinct query parameters. You may want to refer to this insightful answer for further clarification.

Answer №2

As mentioned in the documentation: https://router.vuejs.org/en/api/router-link.html

It is recommended to use the following approach:

  <!-- with query, resulting in /register?plan=private -->
  <router-link :to="{ path: 'accountType', query: { accountType: '1' }}"></router-link>
<router-link :to="{ path: 'accountType', query: { accountType: '2' }}"></router-link>

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

Modifying the Vue page background directly from a page: a step-by-step guide

UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...

cssvue.jsvuejs3

Tips for triggering a keyboard event to the parent in Vue 3

In my Vue 3 project, I have components nested five levels deep. The top-level component named TopCom and the bottom-level component called MostInnerCom both contain a @keydown event handler. If MostInnerCom is in focus and a key is pressed that it cannot ...

vue.jsvuejs3

Is it possible to use an external template and style in a Vue component?

Is it feasible to use a Vue component that has its template stored in an external file (.html)? Is there a similar approach for the style that is stored in a .scss file? This strategy could streamline our development process, allowing front-end HTML devel ...

vue.jsvuejs2vue-component

A guide on integrating CKEditor's simple upload adapter and resolving the CKEditor error in Vue.js: CKEditorError - duplicated modules

Looking to enhance my Vue project with CKEditor functionality, I successfully integrated the editor but now wish to enable image uploads within the text area. Despite using the simple upload adapter as outlined below, the page displaying the editor is no ...

vue.jsckeditor

Parsing error: Unforeseen token encountered. Consider adding a supplementary loader to manage the output of these loaders

Could someone please break down this syntax message?.length === 1 and show me how to convert it into standard JavaScript? https://i.stack.imgur.com/20Ui6.png I am encountering an error when trying to use a Vue.js component that I downloaded from another ...

javascriptnode.jsvue.jsnpm

Vue's asynchronous handling of props

I have a method that triggers an asynchronous call. methods: { computeCoveragePercentage() { this.calculateCompletionBySubject(1).then((percent) => { return percent; }); }, This method computes a percentage based o ...

asynchronousvue.jsvuejs2vue-component

Quasar version 2 (Vue) introduces an exciting new feature in the QTable component - the ability to

Could someone provide some guidance on how to create a table with nested elements like the one shown in the screenshot? View table image here I am facing an issue connecting additional drop-down lines within the table. Is there functionality available fo ...

vue.jsvuejs3vue-componentquasar-frameworkquasar

Steps for deploying updates from a Laravel + Inertia + Vue3 application to a production server

I have been working on a project for a client, making changes to Vue and SCSS files. I need to deploy these changes to the live server, which is hosted on Digital Ocean with server-side rendering enabled. "private": true, "scripts& ...

laravelvue.jsinertiajs

"Utilize Vuejs to establish a binding between two objects when necessary

With the help of moment, my calendar generates 41 days. for (let x = 0; x < 42; x++) { context.add(1, 'd'); let day = { 'date': moment(context), 'events': [] }; } ...

javascriptlaravelvue.js

Using Jest or Mocha alongside Vue: Uncaught SyntaxError: Cannot use import statement outside a module

Update: This post has undergone multiple edits, please refer to this new Stackoverflow post for a clearer explanation of the issue: SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial I have been searc ...

javascriptvue.jsjestjsmocha.jsvue-test-utils

Is it possible to conditionally call the Apollo Client in my Vue template script?

I have a scenario where I pass a query to the apollo client in my template file using a script tag. However, I want to find a more efficient way to handle this without having to specify the query every time. My idea is to pass a boolean value through a pro ...

javascriptvue.jsapollo-client

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

What is the method to implement foreach within a Vue select component?

Is there a way to utilize a Vue loop within a select box in order to achieve the following category and subcategory options layout: +news -sport -international +blog In PHP, I can accomplish this like so: @foreach($categories as $cat ...

javascriptphplaravelvue.js

Does Vuejs have a counterpart to LINQ?

As a newcomer to javascript, I am wondering if Vue has an equivalent to LinQ. My objective is to perform the following operation: this.selection = this.clientsComplete.Where( c => c.id == eventArgs.sender.id); This action would be on a collect ...

javascriptlinqvue.js

Troubleshooting Vue and Typescript: Understanding why my computed property is not refreshing the view

I'm struggling to understand why my computed property isn't updating the view as expected. The computed property is meant to calculate the total price of my items by combining their individual prices, but it's only showing me the initial pri ...

typescriptvue.jsnuxt.js

Potential delay in mounting Rails Webpacker + Vue components when webpack-dev-server is not utilized

Production Delay in Rendering Process While using webpack-dev-server, all components are rendered quickly and function flawlessly. However, when running the application solely through rails s in both development and production, I can witness a noticeable ...

ruby-on-railsvue.jsrenderingwebpacker

Ways to modify a global variable across all components

I am looking to implement an automatic system that changes the page title according to the view I am on. Initially, I considered using a global variable in my main.js file: // MAIN.JS FILE const App = createApp(AppVue).use(router) App.config.globalProper ...

vue.jsvuejs3vite

Mastering the integration of dayjs within a Vue 3 application and component for optimal functionality

I have successfully integrated dayjs into a Vue3 component by including it in the data() function. import dayjs from 'dayjs' export default { data() { return { dayjs } } } While this method allows me to use dayjs within the te ...

vue.jsvuejs3dayjs

Having trouble updating the vue bootstrap table after sending data from child to parent component

I have successfully implemented a slot for the header in vue-bootstrap, allowing me to add a show and hide button with a search box in each column header. The header is placed within a slot and the fields data includes a showFilter property that toggles be ...

vue.jsbootstrap-4nuxt.js

The pagination functionality in Vue.js does not behave as described in the documentation

I've been working on implementing this paginator in vue and come across an issue with the layout. Here is what my current paginator setup looks like: https://i.stack.imgur.com/6ovhU.png I followed the instructions to import and use it as shown below ...

vue.js