在处理这个问题的时候,我一度开始怀疑是不是自己一直以来的赋值方法错了,为什么安卓和PC都能正常显示表单数据,而IOS则不行。
如下图所示,IOS端表单中的所有字段都是空的,没有内容。
而安卓端和电脑端,则正常。
处理过程
一、是否真的有值
首先想到的是,IOS是否因为某种原因,没有获取到值,在数据接口处打印获取的数据:
1 |
alert(JSON.stringify(res.data.workflow_content)) |
发现无论是苹果还是安卓都是一样的,能获取到值。
二、值的类型是否正确
如果都有值,那么肯定是IOS和安卓在某种格式上存在差异,尝试打印这个二级JSON字段,看看类型:
1 |
alert(typeof (res.data.workflow_content)) |
发现,无论安卓还是苹果,都输出object对象,所以也排除。
三、浏览终端的问题
接着,想到可能是安卓微信浏览器和IOS微信浏览器存在差异导致,所以在IOS端,选择浏览器打开。
发现问题仍然存在,也进行排除。
四、数据层级太深
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const data = ref({ loading: false, dialogUrl: '', step: 1, workflowType: [], materialsList: [], form: { id: route.params.id, workflow_type: '', apply_type: '', workflow_start_person: storage.local.get('nickname'), // create_time: new Date().getFullYear() + '-' + (new Date() .getMonth() + 1 < 10 ? '0' + (new Date() .getMonth() + 1) : new Date() .getMonth() + 1) + '-' + new Date() . getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + (new Date() .getSeconds() + 1 < 10 ? '0' + (new Date() .getSeconds() + 1) : new Date() .getSeconds() + 1), workflow_content: {}, workflow_action: '同意', workflow_person_note: '' }, headerToken: { Token: userStore.token } }) |
表单中的字段来自workflow_content,之所以没有对具体内容做定义,是因为流程类型不懂,字段不同,通过v-if进行二次判断索取,所以没有在这里定义。
那么将层级提成后发现,还是不行,而且奇怪的是,同样都是三级数据,有的能显示,有的则不能。
所以也不是这个原因。
五、V-IF导致渲染问题
那么有没有一种可能,是因为VUE中的V-IF导致页面数据没有渲染导致了,为了验证这个问题,将所有V-IF改为V-SHOW,发现没有什么变化,这个原因也排除。
六、有没有可能是后端的问题
其实没可能,因为第一二步就已经排除了,后端其实对这个字段也做了JSON约束的。
1 2 3 4 |
protected $type = [ 'workflow_content' => 'json', 'update_time' => 'timestamp:Y-m-d H:i:s', ]; |
其实到这里,我已经花了大量时间,因为手上没有IOS设备,况且项目需要打包发布,每一次发包需要时间,测试也需要时间。
真正的原因
如果您看到这里,所以您和我一样,做了大量排查,但是都没有解决这个问题,进一步寻找原因的时间成本也会越来越多。
而恰好,我有幸找到了原因,希望和您遇到的问题一致。
1 2 3 |
"element-plus": "^2.2.13", -> "element-plus": "^2.2.28", |
只需要将Element Plus升级到新版本即可。
解决。
原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/11738