问题
我自己写了一个关于uView UI的表单集成组件,发现一个问题,就是如文章题目所说,v-for循环组件内部的v-model绑定会出现失效的情况。
但是这是在通过uniapp编译为微信小程序的时候发现的,编译到H5并不会有这样的错误,其他的框架我没尝试过,不知道是不是普遍问题。简单记录一下问题以及解决办法,下面是错误的代码。
错误代码
<u-form :model="form" ref="uForm">
<u-form-item
v-for="(item, index) in ListData"
:key="index"
:label="`${item.label}:`"
label-width="200"
label-position="top"
:label-style="label_style"
:required="item.required"
:prop="item.value"
>
<!-- 一般输入框 -->
<u-input
type="text"
:placeholder="`请输入${item.label}`"
:clearable="false"
:custom-style="placeholder_style"
:disabled="item.disabled"
v-if="item.type == 'input'"
@blur="inputchange($event, item.value)"
v-model="form[item.value]"
/>
</u-form-item>
<slot name="bottom"></slot>
</u-form>
从组件外部props传入 ListData,ListData的数据格式如下所示:
ListData: [
{
label: "工号",
value: "code",
type: "input",
required: true,
},
],
form:{
code:'222',
}
我想实现的效果:
实际出来的效果:
而且最要命的是,控制台居然还没有报错,无法定位问题,最后我尝试了好多次,发现是v-for中使用v-model时会出现无法显示初始值的问题,也就是说v-model的双向绑定在这里有点失效。
解决办法
其实解决办法有点简单,就是将内部的"u-input"组件的 v-model里面的
值改成 你的数组加索引的方式进行双向绑定。因为多次尝试后,我感觉”u-input“组件内部好像并没有识别到”item.value“这种写法,所以就换了一种写法"form[ListData[index].value]",发现居然可以了,具体原因不明,有知道的大佬告知一下。,以上只是我个人遇到的情况,大家有问题可以留言,随缘回复。
<!-- 一般输入框 -->
<u-input
type="text"
:placeholder="`请输入${item.label}-${item.value}`"
:clearable="false"
:custom-style="placeholder_style"
:disabled="item.disabled"
v-if="item.type == 'input'"
@blur="inputchange($event, item.value)"
v-model="form[ListData[index].value]"
/>
<!-- 一般输入框 -->