vue.js中 v-for 下的v-model 双向绑定失效的解决方法

问题

我自己写了一个关于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]"
/>
<!-- 一般输入框 -->
Logo

前往低代码交流专区

更多推荐