How pass variable to vue-router v-link

Question

I have a vue component to render nav list, and pass nav list, each item includes title and link:

<template>
  <ul>
    <li v-for="item in list"><a v-link="{{ path: item.link }}"></a></li>
  </ul>
</template>

<script>
  export default {
    props: ['list']
  }
</script>

I try pass variable item.link to v-link path, but failed.

get this warn:

[Vue warn]: v-link="{{ path: item.link }}": attribute interpolation is not allowed in Vue.js directives and special attributes.

what should i do if pass variable to v-link path?

thanks for reading :)

czerasz · Accepted Answer · 2017-06-06 06:37:42Z

23

I used the following with vue-router 2.x:

<router-link :to="{path: '/applications/' + currentApplicationId}" class="nav-link">Overview</router-link>

Comments

Kelvin Barsana · Accepted Answer · 2022-12-20 04:10:21Z

21

Shorter way would be:

<router-link :to="`/applications/${currentApplicationId}`">Overview</router-link>

edited Dec 20, 2022 at 4:10

answered Jan 10, 2019 at 6:23

Kelvin Barsana

86414 silver badges28 bronze badges

1 Comment

Sweet Chilly Philly Over a year ago

I would argue that this is the appropriate answer for readability, router link, and ease of use

jilon · Accepted Answer · 2016-09-06 09:36:36Z

11

the statement in v-link doesn't need “Mustache” syntax.

<li v-for="item in list"><a v-link="{ path: item.link }"></a></li>

you can see http://router.vuejs.org/en/index.html

answered Sep 6, 2016 at 9:36

jilon

1261 silver badge3 bronze badges

Collectives™ on Stack Overflow

How pass variable to vue-router v-link

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related