时间戳

首页 > 解决方案 > Vue v-for循环添加了输入字段，类型相同

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

问题描述

我的观点

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

标签： javascriptvue.jsvue-component

解决方案

当您将相同的变量分配给不同的 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>

推荐阅读