How can I include a dynamic variable (value obtained from a getter) in the path of a router-link in Vue.js using TypeScript?

One of my buttons has a router-link setup like this:

<router-link to="summary">
    <button type="button" @click='questionsFinish' class="btn btn-primary" 
            :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
    </button>
</router-link>

I am trying to pass the value from a getter into the router-link like this:

<router-link to="{{getlang}}/summary">
    <button type="button" @click='questionsFinish' class="btn btn-primary" 
            :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
    </button>
</router-link>

This is the getter method

 get getlang(): string {
    return this.$lang.getLang();
  }

This is how the route is defined

 name: "summary",
 path: "/" + languageParameter + "/summary/"
typescriptvue.js

Answer №1

To ensure the router path is set up correctly with a parameter, follow these steps:

  {
   path: '/:languageParameter/summary',
   name: 'About',
   ....
  }

Next, retrieve the getter value in your component using computed properties:

import { mapGetters } from 'vuex';

@Component({
  computed:{
    ...mapGetters(['getlang'])
  }
})

Finally, bind the getter value from computed properties to your router-link:

<router-link :to="`${getlang}/summary`">
     <button type="button" @click='questionsFinish' class="btn btn-primary" 
            :disabled="!isFinishStepEnabled">{{$lang.message.solution_calculate}}
     </button>
 </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

Challenges with passing props to a higher order stateless component in React using Typescript

I'm having trouble creating a NavLink following the react-router tutorial. I'm not sure why it's not working with Typescript 2.1 import React from 'react'; import { Link, LinkProps } from 'react-router'; const NavLink: ...

reactjstypescriptreact-routerjsx

Spying on functions within Vue 3 setup() is not allowed

What is the best way to create a Jest test that triggers the function resetTimer and verifies that startTimer is also triggered? JS Code: setup () { const startTimer = () => { // ... }; const resetTimer = () => { startTi ...

vue.jsjestjsvuejs3vue-composition-apispyon

The function $(window).height() is designed to output a numerical value or potentially undefined

Recently, I encountered an issue with my TypeScript code (version 3.9.5): const height: number = $(window).height(); This resulted in the following error message: TS2322: Type 'number | undefined' is not assignable to type 'number'. A ...

jquerytypescripttypescript-typings

Sort through object attributes according to a different object

I have two sets of data represented by objects object_a and object_b. I want to extract the items from object_a that correspond to the IDs found in object_b. const object_a = { 100: "Stack Overflow", 101: "MDN Web Docks", 10 ...

javascriptvue.js

analyzing whether the window.close spy is being invoked or not during testing operations

When it comes to unit testing my Vue component's methods using vitest and Vue test utils, there is a specific scenario I am working on. It involves a button triggering a call to a close() method, which in turn invokes the browser's window.close() ...

vue.jsvitest

What is the best way to share props with all routes in vue.js?

I need to make sure that all components have access to the BASE_URL variable. Here is an example of my App.js: <template> <router-view></router-view> </template> <script> import addJoke from './components/addJoke.vue&ap ...

javascriptvue.jsvuejs2vue-router

What causes arrays to unexpectedly change in Angular?

Currently, I am working on a project that involves Angular and Laravel. One interesting issue has arisen in one of my components where I receive a variable from the database as an object array. Surprisingly, even though I only loop through this variable wi ...

angulartypescript

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

I am working with an array of objects where each object contains information like this: const myArr=[{name:"john",id:1}{name:"john",id:2}{name:"mary",id:3}] In the first 2 elements, the "name" property has duplicates with the value "john". How can I updat ...

javascriptarraysreactjstypescriptecmascript-6

Using Vuetify's v-chip within a data table's array

Just starting out with vuetify and I'm looking for help on how to set a specific value for a v-chip in my table. <v-data-table class="page__table" :headers="headers" :items="references" > <v-chip ...

javascripttypescriptvue.jsvuetify.jsvue-composition-api

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js

What is the best way to stay on track with internal anchor links when navigating with Aurelia?

I'm currently working on developing a style guide for a project and one of the features I would like to implement is a basic click behavior on anchor links, allowing them to smoothly scroll to the corresponding section on the page. For instance: < ...

javascripttypescriptroutesaurelia

Angular 2 and beyond: Accessing a child element using @ViewChild()

Is it possible to access the child elements (specifically <img>) of @ViewChild() in Angular 2+ without explicitly declaring them? Within template.html <div #parent> <!-- Other elements besides <img> can also be present --> < ...

angulartypescriptangular-componentsviewchild

Using Vue with Webpack: Do not include any extra properties in the options

While I was in the process of updating npm packages, an error occurred without any specific details provided. I investigated whether it was related to my webpack configuration, but running webpack without using my configuration did not resolve the issue. ...

vue.jsnpmwebpack

What is the correct way to handle Vue props that include a dash in their name?

I am currently working on a project using Vue. Following the guidelines of eslint, I am restricted from naming props in camel case. If I try to do so, it triggers a warning saying Attribute ':clientId' must be hyphenated. eslint vue/attribute-hyp ...

typescriptvue.jsvue-props

Implement a loading bar on the entire page in Vue.js while a request is being made

There is an "edit" button on my page which allows me to edit certain elements and either save or close without saving. I would like to implement a loading bar that displays when the user clicks the "save" button, indicating that the data is being processe ...

javascriptvue.jsvuetify.js

Using VueJs to dynamically adjust the width of an element based on another element

I’m currently developing a Trivia app that features an <h1> element which dynamically changes every 10 seconds. My goal is to align the width of a radio button group component (b-form-group from Bootstrap-Vue components) with the width of the <h ...

vue.jsvue-componentbootstrap-vue

What is the best way to determine the starting and ending times of a session?

I need to track the session start and end times in Laravel. Should I use Laravel Websockets or Pusher for this task? Which technology should I focus on learning more about? ...

laravelvue.js

Steps for Signing Up for a Collaboration Service

I'm struggling to understand how to monitor for new values in an observable from a service. My ultimate objective is to integrate an interceptor, a service, and a directive to show loading information to the user. I have set up an interceptor to liste ...

angulartypescriptrxjsinterceptor

Utilizing Functions in a BTable Filter

I've been grappling with this issue for close to 6 hours now, but I haven't been able to find a solution that works for me. The problem at hand is that I need to filter the Bootstrap Vue table using a function, but so far, my attempts have not b ...

vue.jsbootstrap-vue

Using an internal array to create a unique D3 chart

const information = [{ date: '02/03/18', value: 35, }, { date: '02/03/18', value: 89, }, [...] ]; const svgGraphics = d3.select('svg'); const margins = { top: 20, right: 20 ...

d3.jsvue.js