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

【问题标题】：How to set the id to the index of the v-for loop如何将 id 设置为 v-for 循环的索引
【发布时间】：2021-05-28 12:13:50
【问题描述】：

不知道如何将 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>

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

【问题讨论】：

【解决方案1】：

您可以尝试使用v-bind:id，如下所示：

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

【讨论】：

【解决方案2】：

对于 css 响应，在 id 结构的开头使用一些字符串，如下所示：

<li v-for="(item, index) in items" v-bind:key="item.id">
    <input v-bind:id="'str' + index" type="number">
</li>

【讨论】：

【解决方案3】：

如果您尝试添加item-index 之类的item-1、item-2，以避免id 冲突。

尝试使用模板字面量，例如：myname-${index}。

不要伪造“``”。

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

【讨论】：