javascript - 如何将 id 设置为 v-for 循环的索引

Question

无法弄清楚如何将 id 设置为 v-for 循环的索引。

我试过了：

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= {{index}} type= "number">
</li>

<li v-for="(item, index) in items" v-bind:key="item.id">
   <p>{{item.name}}</p>
   <input id= index type= "number">
</li>

还有许多其他变体，但它不起作用。非常感谢帮助！

标签： javascripthtmlvue.jsindexingtags

Answer 1

如果您尝试添加item-indexlike item-1, item-2, 以避免 id 冲突。

尝试使用模板文字，例如：myname-${index}.

不要伪造“``”。

参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

<li v-for="(item, index) in items" v-bind:key="item.id">
   <input v-bind:id="`yourname-${index}`" type= "number">
</li>