uniapp+uview中使用v-if控制表单项导致显示异常错乱

背景:使用uniapp做项目很久了,以前也遇到过这类问题,一直没有记录,以为官方会更新,…主要也不知道是uview的问题还是uniapp的问题。uview1.x和2.x都有这类问题,先记录一下。

<template v-if="tabsCurrent == 0 || tabsCurrent == 2">
	<u-form-item
		:label="moneyLabel('sd')"
		prop="money_sd"
		borderBottom
	>
		<u-input
			type="digit"
			v-model.number="form.money_sd"
			border="none"
			inputAlign="right"
			placeholder="请输入总额"
		>
			<template slot="suffix">
				<text>万元</text>
			</template>
		</u-input>
	</u-form-item>
</template>
<template v-if="tabsCurrent == 1 || tabsCurrent == 2">
	<u-form-item
		:label="moneyLabel('gjj')"
		prop="money_gjj"
		borderBottom
	>
		<u-input
			type="digit"
			v-model.number="form.money_gjj"
			border="none"
			inputAlign="right"
			placeholder="请输入总额"
		>
			<template slot="suffix">
				<text>万元</text>
			</template>
		</u-input>
	</u-form-item>
</template>

类似于这种在form内部使用v-if控制表单项的显示与隐藏,出现表单错乱的问题,动态显隐的label标签有时候会变成空白,有时候又替换成其它项的label值。因这个bug和问题,已修改好,暂时无法提供demo或截图。

解决办法:

  1. 在动态显隐的form-item外面加一层view,v-if写到view上,并且尽量使用大v-if控制,不要有很多个v-if来回切换;
  2. 使用v-show控制;

上面的解决办法不是最好的,是我自己目前的解决办法,如果有其它小伙伴也遇到这问题,欢迎一起交流!
也希望官方看到类似问题,能及时解决~


版权声明:本文为weixin_43109722原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。