Vue+Element Plus 表单数据不显示或显示不全的问题解决记录

在处理这个问题的时候,我一度开始怀疑是不是自己一直以来的赋值方法错了,为什么安卓和PC都能正常显示表单数据,而IOS则不行。

如下图所示,IOS端表单中的所有字段都是空的,没有内容。

Vue+Element Plus 表单数据不显示或显示不全的问题解决记录

而安卓端和电脑端,则正常。

Vue+Element Plus 表单数据不显示或显示不全的问题解决记录

处理过程

一、是否真的有值

首先想到的是,IOS是否因为某种原因,没有获取到值,在数据接口处打印获取的数据:

发现无论是苹果还是安卓都是一样的,能获取到值。

二、值的类型是否正确

如果都有值,那么肯定是IOS和安卓在某种格式上存在差异,尝试打印这个二级JSON字段,看看类型:

发现,无论安卓还是苹果,都输出object对象,所以也排除。

三、浏览终端的问题

接着,想到可能是安卓微信浏览器和IOS微信浏览器存在差异导致,所以在IOS端,选择浏览器打开。

发现问题仍然存在,也进行排除。

四、数据层级太深

表单中的字段来自workflow_content,之所以没有对具体内容做定义,是因为流程类型不懂,字段不同,通过v-if进行二次判断索取,所以没有在这里定义。

那么将层级提成后发现,还是不行,而且奇怪的是,同样都是三级数据,有的能显示,有的则不能。

所以也不是这个原因。

五、V-IF导致渲染问题

那么有没有一种可能,是因为VUE中的V-IF导致页面数据没有渲染导致了,为了验证这个问题,将所有V-IF改为V-SHOW,发现没有什么变化,这个原因也排除。

六、有没有可能是后端的问题

其实没可能,因为第一二步就已经排除了,后端其实对这个字段也做了JSON约束的。

其实到这里,我已经花了大量时间,因为手上没有IOS设备,况且项目需要打包发布,每一次发包需要时间,测试也需要时间。

真正的原因

如果您看到这里,所以您和我一样,做了大量排查,但是都没有解决这个问题,进一步寻找原因的时间成本也会越来越多。

而恰好,我有幸找到了原因,希望和您遇到的问题一致。

只需要将Element Plus升级到新版本即可。

解决。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/11738

(0)
上一篇 2023年1月10日 下午3:50
下一篇 5天前

相关推荐

发表回复

登录后才能评论