在 Vue.js 中將 router-link 設置為帶有組件數據的屬性

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