Einstellen der Router-Verbindung zum Attribut mit Komponentendaten in Vue.js

Question

Wie injiziert man Komponentendaten in <router-link to="...">? Beispiel:

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() {...} 
}; 

In diesem Beispiel die Ausgabe <li><a href="#/{{ file.path }} ">test</a></li> ist. Wie bekomme ich /test statt #/{{ file.path }}?

Answer 1

Sie falsche Syntax verwenden, Sie müssen nur v-bind wie folgt verwenden:

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

oder kurz:

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