演练环境上前端页面不能正常显示

Posted 2023-05-17

参考技术A 演练环境上前端页面不能正常显示解决办法：
1.1 测试提出的bug，我查看了一下其他页面选择时间的控件。通过对比发现别人用的glyphicon-arrow-left 尔我用的是 icon-arrow-left 而且百度也没有找到相关问题的解决办法。
1.2 对于这种查阅百度也找不到解决的办法，也只能试试运气查看源码（bootstrap-datetimepicker.js）了。
1.3 通过（CTRL + F）在bootstrap-datetimepicker.js查找关键字 icon-arrow-left 我发现以下代码解读代码：：我们发现左右箭头图 就是this.icons对象（this是Datetimepicker类的一个实例）的两个属性值 leftArrow（左箭头）rightArrow（右箭头），而这个值和this.bootcssVer的属性有关。
1.4 然后我们继续查找bootcssVer 关键字>在87行我们查找到如下代码解读代码: 我们发现，this.bootcssVer 的值和当前是否是input（this.isInput）标签和该标签的class（this.element.is(\'.form-control\')）属性的值有关。现在问题已经很明显了，我的input属性没有class = "form-control"
1.5 通过在源码87行（改行赋值bootcssVer的值）打一个断点，不出所料该值为2，我的input属性缺少class = "form-control"。

组件内或者vuex数据已变化但是页面显示或许不正常

一、问题产生背景：

　　组件内的数据比较复杂，涉及多层次的数组和对象的情况下，某些值发生变化但是页面值没有变化；更新vuex的数据，同样在涉及多层次的数组和对象的情况下，某些值发生变化但是页面值没有变化；某些环境下，比如本地、测试等没有出现此问题，但是灰度和正式却出现此问题；总而言之，经过检查后台接口数据以及前端处理的数据皆正常，但是页面数据显示不正常的时候，就该检查是否没有使用$set了，另外，涉及修改多层次的数组和对象等数据，最好还是使用$set而不直接赋值。