背景:使用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或截图。
解决办法:
- 在动态显隐的form-item外面加一层view,v-if写到view上,并且尽量使用大v-if控制,不要有很多个v-if来回切换;
- 使用v-show控制;
上面的解决办法不是最好的,是我自己目前的解决办法,如果有其它小伙伴也遇到这问题,欢迎一起交流!
也希望官方看到类似问题,能及时解决~