v-show不更新显示问题

19 篇文章 1 订阅
在uniapp项目开发中,遇到使用v-show切换图片显示时,由于初始数据中缺少v-show绑定的属性,导致图片无法更新。问题源于后台返回的数据中,若某个字段无值,则不会包含该字段,导致数据覆盖后v-show绑定的属性不存在。为解决此问题,需要在data中预先定义相关属性,确保上传图片后赋值能正常更新元素显示。
摘要由CSDN通过智能技术生成

问题

做uniapp项目的时候遇到使用v-show进行图片的切换(显示隐藏)发现v-show绑定的值变为true的时候,当前元素不进行更新
在这里插入图片描述
在这里插入图片描述
图片上传完成后赋值
在这里插入图片描述

如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。
图片上传完成之后会给employeeForm.idCardReverse赋值。
打印结果也显示成功赋值,但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。
于是寻找了一下,发现是后台返回的对象里面没有idCardReverse这个值((因为要做数据回显功能在onLoad的时候先拿到数据渲染页面)我是把拿到的对象直接赋值给了employeeForm对象,没有想到后台返回当前参数如果没有值的话就不返回这个属性,就导致图片上传之前employeeForm对象已经被覆盖了里面没有idCardReverse这个属性,在图片上传完成之后赋值就等于说是从新造了一个属性,然而v-show只接受在data中定义的不接受后来添加的属性,所以就导致虽然有数据,但元素没更新)

在这里插入图片描述
解决:
之后我在data中重新定义了一个属性,这样拿到后台数据覆盖就不会出现未定义的情况了,图片上传完成赋值给idCardReverseImg就能正常的更新显示了
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值