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

【问题标题】：Vue v-for loop added input field, types on same valueVue v-for循环添加输入字段，类型相同
【发布时间】：2023-04-08 03:24:01
【问题描述】：

我的观点

<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 输入字段键入不同的值并使用方法将其传递给数据返回？

【问题讨论】：

这很容易解决。请使用codesandbox.io为此创建small demo，其他人可以提供更多帮助。
您的 rfidSideA 是如何定义的
first_name : {"John", "David", "Dave" } ????这是无效的语法。 first_name 是数组还是对象？
@PrabhatGupta 未定义。我正在尝试通过 data() {return { rfidSideA: ' ' } } 上的该字段传递数据
只需将 rfidSideA 设置为 v-model="listings.rfidSideA"

标签： javascript vue.js vue-component

【解决方案1】：

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

<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>

【讨论】：