vue v-for循环打印的form表单,如何控制当前index的form表单中model值?

我通过 v-for循环 打印的 form表单,我想控制当前index的表单,而不影响其他index的form表单,该如何做到呢?
问题如下:不同index的form表单,被同时控制了
image.png

原代码:

<div v-for="(client, index) in 6" v-if="index < numberOfPeople" v-bind:key="index" @click="sendIndex(index)">
        <h3>添加顾客 {{index+1}}</h3>
        <el-form-item prop="clientIDNumber" label-width="68px">
          <label slot="label">ID&nbsp;&nbsp;&nbsp;号</label>
          <el-input v-model="checkInForm.clientIDNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="68px">
          <label slot="label">姓&nbsp;&nbsp;&nbsp;名</label>
          <el-input v-model="checkInForm.clientName" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="68px">
          <label slot="label">性&nbsp;&nbsp;&nbsp;别</label>
          <el-radio v-model="checkInForm.clientSex" label="男">男</el-radio>
          <el-radio v-model="checkInForm.clientSex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item prop="clientPhoneNumber" label-width="68px">
          <label slot="label">手机号</label>
          <el-input v-model="checkInForm.clientPhoneNumber" clearable></el-input>
        </el-form-item>
        <el-form-item prop="checkInDuration" label-width="68px">
          <label slot="label">住多久</label>
          <el-input v-model="checkInForm.checkInDuration" clearable></el-input>
        </el-form-item>
        <div class="dividing-line2"></div>
      </div>

新代码:

<div v-for="(client, index) in checkInRequiredArray" v-if="index < numberOfPeople" v-bind:key="index" @click="sendIndex(index)">
        <h3>添加顾客 {{index+1}}</h3>
        <el-form-item prop="clientIDNumber" label-width="68px">
          <label slot="label">ID&nbsp;&nbsp;&nbsp;号</label>
          <el-input v-model="checkInRequiredArray[index].clientIDNumber" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="68px">
          <label slot="label">姓&nbsp;&nbsp;&nbsp;名</label>
          <el-input v-model="client.clientName" clearable></el-input>
        </el-form-item>
        <el-form-item label-width="68px">
          <label slot="label">性&nbsp;&nbsp;&nbsp;别</label>
          <el-radio v-model="client.clientSex" label="男">男</el-radio>
          <el-radio v-model="client.clientSex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item prop="clientPhoneNumber" label-width="68px">
          <label slot="label">手机号</label>
          <el-input v-model="client.clientPhoneNumber" clearable></el-input>
        </el-form-item>
        <el-form-item prop="checkInDuration" label-width="68px">
          <label slot="label">住多久</label>
          <el-input v-model="client.checkInDuration" clearable></el-input>
        </el-form-item>
        <div class="dividing-line2"></div>
      </div>

data:
image.png

image.png

好像没有效果
image.png

求大佬解答一下!!!

阅读 3k
3 个回答

给你举个例子:

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <input type="text" v-model="item.value" />
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      list: [{}, {}, {}]
    };
  },
}
</script>

值都会在list里面

新手上路,请多包涵

根据下标啊,有不同的key

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏