vue 中嵌套循环 input 如何绑定 v-model 的问题

  • Z时代
  • 2024-03-05
  • 分类：IT

vue 中嵌套循环 input 如何绑定 v-model 的问题

大致业务场景

  • 后台返回需要提交的一份单据的大单数>单数>小单数（例如“大单 1”下面包含“单 1”和“单 2”，每个“单”下面又包含“小单 1”，“小单 2”，“小单 3”）
  • 上面的大单、单、小单都是动态的，由后台返回，前端需要根据“小单数”的数量动态循环出对应的 input 并可输入数量向后台发送

目前遇到的问题

  • 我采用的嵌套循环，即使用三个 v-for 把大单、单、小单三个循环出来，但是最终的 input 的 v-model 绑定上出现问题，无法正确拿到其值
  • 也就是下面代码中 el-input 中的 v-model 该如何写可以正确拿到每个小单里面的值？

相关示例代码

<el-form
  ref="dataForm"
  :model="Data"
  label-position="left"
  label-width="90px"
>
  <el-form-item
     v-for="(item, index) in dan"
     :key="index"
     :label="item['标签']"
   >
     <p
        v-for="(t, x) in item['单数']"
        :key="'ds' + x"
      >
        单{{ t }}
        <el-input
           v-for="(i, k) in item['小单数']"
           :key="k"
           v-model=""
           "
        />
      </p>
   </el-form-item>
</el-form>
export default {
name: 'App',
   data() {
    return {
       dan {
          1: {
             '标签': ‘大单 1’,
             '单数': 2,
             '小单数': 3
             },
          2: {
             '标签': ‘大单 2’,
             '单数': 3,
             '小单数': 5
             }
            }
        }
    }
}

回答：

dan {
    1: {
        '标签': ‘大单 1’,
        '单数': 2,
        '小单数': 3
    },
    2: {
        '标签': ‘大单 2’,
        '单数': 3,
        '小单数': 5
    }
}

转成↓

dan {
    1: {
        '标签': ‘大单 1’,
        '单数': new Array(2),
        '小单数': new Array(3)
    },
    2: {
        '标签': ‘大单 2’,
        '单数': new Array(3),
        '小单数': new Array(5)
    }
}

然后给 v-model 绑定 i

以上是 vue 中嵌套循环 input 如何绑定 v-model 的问题 的全部内容， 来源链接： utcz.com/p/937147.html

回到顶部