Vue.jsでどのようにルータリンクを動的に構築できますか？

Question

私は私のメッセージプロパティは、その中にオブジェクトの配列を持っている。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属性に追加する必要があります。私は1と2のIDSとのメッセージ配列の二つのアイテムを持っていたのであれば、私はこのような何かを得ることを期待する：

 <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属性は、期待どおりにレンダリングされます。あなたは文字通り値として'user' + item.idを使用しているv-bind:v-bind:なしto

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

前

Answer 1

だけ追加します。 詳細を確認するにはthis docs section