How to give dynamic URL in <router-link> in VueJS?

Question

I am using v-for directive to get URL name. However, I am facing difficulty in passing the value obtained from a instance of v-for as URL name.

<template>
  <v-list-tile class="pl-5" v-for="choice in choices" :key="choice.name">
    <v-list-title-content>
      <router-link to="'/' + choice.name">
        <v-list-title-title class="white--text headline">
          {{choice.name}}
        </v-list-title-title>
      </router-link>
    </v-list-title-content>
  </v-list-tile>
</template>

<script>
export default{
  data(){
    return{
      choices:[
         name:'A',
         name:'B',
         name:'C',
         name:'D'
      ]    
    }
  }
}
</script>

Radu Diță · Accepted Answer · 2019-04-01 06:54:21Z

9

You need to bind to. Try something like this

<router-link :to="'/' + choice.name">

answered Apr 1, 2019 at 6:54

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 05:53:39Z

1

Well, In order to make any attributes to dynamic, you need to use v-bind directive.

Short-hand property for v-bind is :

Hence you can use it as below

<router-link v-bind:to="'/' + choice.name">

With short-hand

<router-link :to="'/' + choice.name">

Official v-bind doc

Hope it helps!

edited Jul 16, 2022 at 5:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 1, 2019 at 7:06

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

Comments

GMKHussain · Accepted Answer · 2021-10-04 14:03:58Z

0

Example with Data():

<router-link :to="myURL">My Link</router-link>

export default {
    // ...
    data() {
        return {
            myURL: '/my-page-link'
        }
    }
    // ...
}

Example without data()

<router-link :to="/my-page-link">My Link</router-link>

Note: v-bind OR : before to attribute

answered Oct 4, 2021 at 14:03

GMKHussain

4,8151 gold badge36 silver badges22 bronze badges

Comments

exoticism4869 · Accepted Answer · 2021-11-03 09:49:56Z

0

one tip:

when using v-bind like:

// Box.vue
<router-link id="box" :to="{ path: pathto }">{{ name }}</router-link>

don't do the fool thing like me as below:

<Box name="Frontend" pathto="/box/frontend" />
<Box />
<Box />

then you break down.

answered Nov 3, 2021 at 9:49

exoticism4869

6515 silver badges4 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 04:24:22Z

0

You need to bind the choice name like any other variable property: Use v-bind:to or the shorthand form :to.

Here are the docs to v-bind: https://v2.vuejs.org/v2/api/#v-bind

You can also directly bind an object to the to directive, passing along the name of the route, so that you need to concat a path. Like this:

<router-link :to="{ name: 'choice1' }">Link</router-link>

edited Jul 15, 2022 at 4:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 1, 2019 at 6:54

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Collectives™ on Stack Overflow

How to give dynamic URL in <router-link> in VueJS?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related