Vue v-for循环添加了输入字段，类型相同

Question

我的视图

<div v-for="(listings, index) in list2" :key="index">
<b-form-input id="input-live" v-model="listings.first_name" placeholder="PLAYER NAME 1" disabled></b-form-input>
<b-form-input id="input-live" v-model="rfidSideA"></b-form-input>
</div>
/** prints out three field for first_name and rfidSideA as I want **/
/** BUT when I type value for first rfidSideA input field, it displays same on other two as well **/

List2数据

[
{
first_name : {"John", "David", "Dave" }
}
]

错误：无论我在第一个rfidSideA输入字段上键入什么，它都会为生成的其他两个字段显示相同的值。

有没有一种方法可以为rfidSideA输入字段键入不同的值，并使用方法将其传递给数据返回？

Answer 1

当您将相同的变量分配给不同的v模型时，它们都将指向相同的变量。从而为每个单独的元素分配不同的变量。在循环中，您需要找到与循环相关的任何值。

<div v-for="(listings, index) in list2" :key="index">
<b-form-input id="input-live" v-model="listings.first_name" placeholder="PLAYER NAME 1" disabled></b-form-input>
<b-form-input id="input-live" v-model="listings.rfidSideA"></b-form-input>
</div>