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

文章描述了在使用uniapp和uview框架开发项目时遇到的表单元素动态显隐导致的标签错误问题,表现为label标签有时空白或显示其他项的值。作者提供了临时解决方案,即在form-item外层包裹view并使用v-if,避免过多的小v-if切换,或使用v-show。作者希望此问题能得到官方的关注和修复。
摘要由CSDN通过智能技术生成

背景:使用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控制;

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值