Vue.jsのコンポーネントデータでルータのリンクを属性に設定する

Question

<router-link to="...">にコンポーネントデータを挿入する方法は？サンプル：

var data = {files: [{name: "test", path: "/test"}]}; 

var component = { 
    data: function() { 
     return data 
    }, 
    template: '<ul class="files"><li v-for="file in files"><router-link to="{{ file.path }}">{{ file.name }}</router-link></li></ul>', 
    created: function() {...} 
}; 

このサンプルでは、​​出力は<li><a href="#/{{ file.path }} ">test</a></li>です。 #/{{ file.path }}の代わりに/testを取得するにはどうすればよいですか？あなたは間違った構文を使用している

Answer 1

、あなたはただ、次のようにv-bindを使用する必要があります。

template: '<ul class="files"><li v-for="file in files"><router-link v-bind:to="file.path">{{ file.name }}</router-link></li></ul>', 

やショートで：[どのように動的にVueのルータリンクを構築することができますの

template: '<ul class="files"><li v-for="file in files"><router-link :to="file.path">{{ file.name }}</router-link></li></ul>',