Search code examples
vue.jsvue-router

How pass variable to vue-router v-link

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 :)

Solution

  • 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