I am currently exploring how to achieve 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>
The messages property contains an array of objects, each with an id property that I aim to append to the "to" attribute. If there are two items in the messages array with ids 1 and 2 respectively, the expected result would be:
<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 attempted using {{ message.id }}, but this resulted in an interpolation error. How can I display the actual value for message.id in the "to" attribute? The item.name attribute displays correctly.