这是一个创建于 786 天前的主题，其中的信息可能已经有所发展或是发生改变。
大致业务场景
- 后台返回需要提交的一份单据的大单数>单数>小单数（例如“大单 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
}
}
}
}
}
 |
1
chengxy 2022-02-28 02:28:03 +08:00
可以参考各种 form render 的实现方式
|
 |
2
MacDows 2022-02-28 02:37:44 +08:00 via Android
遇到了类似的问题
https://v2ex.com/t/832529#reply9 我最后是把这些嵌套变成一个列表,加一个 Level 值标记层数 然后就好多了，vue 新手也能写了 要不然循环嵌套会很复杂 这肯定不是最优方案，抛砖引玉，欢迎大佬指点 |
 |
3
murmur 2022-02-28 07:47:52 +08:00
vmodel 是可以写变量的，提前生成一个数组或者 object
|
|
4
murmur 2022-02-28 07:48:37 +08:00
拿不到数据大概率是你绑定的变量没有提前生成好，不行就$set 一波，反正响应式得建立起来
|
 |
6
cxe2v 2022-02-28 09:59:32 +08:00
<el-input
v-for="(i, k) in item['小单数']" :key="k" v-model="" " /> 你这里为什么是 in item['小单数']"，应该是 in t['小单数']吧 |
 |
7
konakona 2022-02-28 10:29:00 +08:00
v-for 可以拼接。
参考： <el-input v-model="form.package_goods[scope.$index].quantity" clearable placeholder=""></el-input> |
|
8
konakona 2022-02-28 10:29:12 +08:00
打顺手了，是 v-model 可以拼接。
|
|
9
konakona 2022-02-28 10:31:38 +08:00
像你使用 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.字段名称"，第三层如此类推。
|
Select Language