Setting the router-link to attribute with component data in Vue.js

Question

How to inject component data in <router-link to="...">? Sample:

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 this sample the output is <li><a href="#/{{ file.path }} ">test</a></li>. How do I get /test instead of #/{{ file.path }}?

Possible duplicate of How can you dynamically build router-links in Vue.js? — AldoRomo88
– AldoRomo88, Commented Jan 13, 2017 at 13:10

tony19 · Accepted Answer · 2022-07-15 22:46:56Z

1

You are using wrong syntax, You just need to use v-bind as follows:

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

or in short:

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

edited Jul 15, 2022 at 22:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 13, 2017 at 12:43

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting the router-link to attribute with component data in Vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related