Vue-router: v-link dynamic params

[gcfeng]

My Vue component's data looks like

{
  data: function() {
    return {
       one: 'a'
    }
  }
}

in template, I use v-link to dynamic generate my link

<a v-link="/home/{{one}}">{{one}}</a>

Sadly, this doesn't work. When I try to custom a directive, it warns me

[Vue warn]: v-plink="/one/{{one}}": attribute interpolation is not allowed in Vue.js directives and special attributes.

How can I use v-link to generate dynamic link? or there is another way to do this? thanks.

[zjzcn]

+1

[JosephSilber]

Use regular JavaScript expressions for directives:

<a v-link="'/home/' + one">{{ one }}</a>

[gcfeng]

Thanks @JosephSilber . I missed the 1.0 binding syntax. In 1.0, literal directives are not valid and mustache tags can only appear inside native attributes.

[raidenz]

@JosephSilber thanks you save my life