How can you dynamically build router-links in Vue.js?

Question

I am trying to do the following in Vue.js

     <table>
        <tr v-for="item in messages">
            <td><router-link to="'/user/' + item.id">{{ item.name }}</router-link></td>
        </tr>
    </table>

My messages property has an array of objects in it. Each object has an id property, which I want to be appended on to my to attribute. So if I had two items in the messages array with ids of 1 and 2, I would expect to get something like this:

     <table>
        <tr v-for="item in messages">
            <td><router-link to="/user/1">{{ item.name }}</router-link></td>
        </tr>
        <tr v-for="item in messages">
            <td><router-link to="/user/2">{{ item.name }}</router-link></td>
        </tr>
    </table>

I also tried putting doing {{ message.id }}, but that gives me an interpolation error. How can I get this to render the actual value for message.id in the "to" attribute? The item.name attribute renders as expected.

tony19 · Accepted Answer · 2022-07-15 22:12:13Z

3

Just add v-bind: before to

<table>
    <tr v-for="item in messages">
        <td><router-link v-bind:to="'/user/' + item.id">{{ item.name }}</router-link></td>
    </tr>
</table>

Without v-bind: you're literally using 'user' + item.id as value. For more clarification check this docs section

edited Jul 15, 2022 at 22:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 4, 2017 at 22:26

AldoRomo88

2,0761 gold badge18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How can you dynamically build router-links 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