uni-app APP端表单项用v-if控制丢失问题

uni-app APP端表单项用v-if控制丢失问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.3.3

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：黑鲨2

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<u-form-item label-width="150rpx" v-if="formData.isExecute === 'Y' && actionType === 'A'" label="时间" prop="occurTime">  
    <u-input :value="formData.occurTime" type="select" @click="handleTimeSelect('occurTime')"/>
</u-form-item>  
<u-form-item label-position="top" label-width="150rpx" v-if="formData.isExecute === 'Y' && actionType === 'A'" label="所见" prop="occurWhat">  
    <u-input v-model="formData.occurWhat" type="textarea" />
</u-form-item>  
<u-form-item label-position="top" label-width="150rpx" v-if="formData.isExecute === 'Y' && actionType === 'A'" label="什么原因" prop="occureWhy">  
    <u-input v-model="formData.occureWhy" type="textarea" />
</u-form-item>  
<u-form-item label-position="top" label-width="150rpx" v-if="formData.isExecute === 'Y' && actionType === 'A'" label="你做了啥" prop="occourYoudo">  
    <u-input v-model="formData.occourYoudo" type="textarea" />
</u-form-item>  
<u-form-item label-width="150rpx" v-if="formData.isExecute === 'Y' && actionType === 'A'" label="是否有效" prop="occoureValid">  
    <u-radio-group v-model="formData.occoureValid">  
        <u-radio name="Y">是</u-radio>  
        <u-radio name="N">否</u-radio>  
    </u-radio-group>  
</u-form-item>

操作步骤：

将这些表单项绑定为同一个表达式，切换表达式的值

预期结果：

表单项全体消失或显示

实际结果：

显示出来的时候丢失最后一项表单项

bug描述：

多个表单项使用相同的表达式判定并且切换表达式true false时，最后一项表单项会丢失，并且仅在app端会有这个问题


更多关于uni-app APP端表单项用v-if控制丢失问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

看逻辑是否跟丢失的那些有冲突

更多关于uni-app APP端表单项用v-if控制丢失问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


丢失的表单项和显示的一模一样的逻辑

如果不用uform 会出现这样的问题么?是不是只有uform出现这样的问题,如果还是无法解决的话,请把demo附上来

我发下面了，你们可以搜一下行为记录看那的代码试一下

问题代码

这是一个已知的uni-app在App端的渲染问题。当多个相邻组件使用完全相同的v-if条件表达式，并且频繁切换显示/隐藏状态时，Vue的虚拟DOM diff算法在App端可能出现渲染异常。

问题原因： 在App端，uni-app的渲染机制与Web端存在差异。当多个相同条件的v-if组件快速切换时，Vue的复用机制可能导致最后一个组件的key识别错误，从而造成渲染丢失。

解决方案：

  1. 为每个表单项添加唯一的key属性（推荐）：
<u-form-item 
  v-if="formData.isExecute === 'Y' && actionType === 'A'" 
  label="时间" 
  prop="occurTime"
  key="item-time">
</u-form-item>

<u-form-item 
  v-if="formData.isExecute === 'Y' && actionType === 'A'" 
  label="所见" 
  prop="occurWhat"
  key="item-what">
</u-form-item>
  1. 使用计算属性简化条件，但依然需要key：
computed: {
  shouldShowItems() {
    return this.formData.isExecute === 'Y' && this.actionType === 'A'
  }
}

// 模板中
<u-form-item v-if="shouldShowItems" key="item-time">...</u-form-item>
<u-form-item v-if="shouldShowItems" key="item-what">...</u-form-item>
  1. 使用v-show替代v-if（如果频繁切换）：
<u-form-item v-show="formData.isExecute === 'Y' && actionType === 'A'">...</u-form-item>
回到顶部