如何在Vue.js中动态构建路由器链接？ [英] How can you dynamically build router-links in Vue.js?

问题描述

我正在尝试在Vue.js中执行以下操作

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>

我的消息属性中包含一系列对象。每个对象都有一个id属性，我想将其附加到my to属性。因此，如果我在消息数组中有两个项目，其中ID为1和2，我希望得到类似的结果：

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>

我也尝试过做{{message.id}}，但这给了我一个插值错误。如何让它在to属性中呈现message.id的实际值？ item.name属性按预期呈现。

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.

推荐答案

在 v-bind： >到

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>

没有 v-bind：你是字面意思是使用'user'+ item.id 作为值。
如需更多说明，请查看此文档部分

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

这篇关于如何在Vue.js中动态构建路由器链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！