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

[juventusryp]

大致业务场景

• 后台返回需要提交的一份单据的大单数>单数>小单数（例如“大单 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
             }
            }
        }
    }
}

[chengxy]

可以参考各种 form render 的实现方式

[MacDows]

遇到了类似的问题
https://v2ex.com/t/832529#reply9
我最后是把这些嵌套变成一个列表,加一个 Level 值标记层数
然后就好多了，vue 新手也能写了
要不然循环嵌套会很复杂
这肯定不是最优方案，抛砖引玉，欢迎大佬指点

[murmur]

vmodel 是可以写变量的，提前生成一个数组或者 object

[murmur]

拿不到数据大概率是你绑定的变量没有提前生成好，不行就$set 一波，反正响应式得建立起来

[nitmali]

多半是没有响应，要么$set ，要么 :value @change

[cxe2v]

<el-input
v-for="(i, k) in item['小单数']"
:key="k"
v-model=""
"
/>


你这里为什么是 in item['小单数']"，应该是 in t['小单数']吧

[konakona]

v-for 可以拼接。

参考：
<el-input v-model="form.package_goods[scope.$index].quantity" clearable placeholder=""></el-input>

[konakona]

打顺手了，是 v-model 可以拼接。

[konakona]

像你使用 v-for 循环来拼接 v-model 可以直接用 v-for 绑定的值，你的是第一层 el-form-item 的 v-for 里的 item ，第一层的 el-input v-model 可以是：v-model="item.字段名称" 。第二层的 v-for 的是 t ，v-model 可以是：v-model="t.字段名称"，第三层如此类推。