Настройка привязки маршрутизатора к атрибуту с данными компонента в 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>. Как я могу получить /test вместо #/{{ file.path }}?

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>', 

или короче:

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