基于Vue进行web开发的前端常见错误

* 值设置缺少冒号(如采用ESLint等进行代码校验可避免此问题出现)

Vue开发过程中,一般情况下,只有在属性为变量时才会在属性前添加冒号,如直接填写为属性值则不添加冒号;
但也有一些特殊情况,例如进行tree开发时使用的indent属性,按照一般情况的说法,此属性设置应如下:

indent=“8”

这个时候如果打开页面F12会看到报类型错误

错误原因:该字段的值类型应为number,可我们填写的类型是string

解决办法:在前添加冒号

:indent=“8”

相同的情况还有应为boolean类型却填写String类型等,解决办法同上

* 不同环境相同代码某一环境显示异常,相关错误信息不再展示(基础数据未及时更新)

此种情况第一反应为:数据问题或配置问题

因为配置问题造成此种情况的可能性相对较小,一般出现在首次部署的时候,后期一旦调通之后几乎不会发生变化

下面来说下数据问题引起异常的情况

因每个系统业务不同,所以针对业务数据的排查可结合自己的业务进行分析

剩下的基本就是系统参数或数据字典了(暂时只考虑到了这些情况,如有补充可留言)

举例说明下我这边遇到的一个问题

有一个页面展示,内置table,table有一个类型字段,后台传给我的是类型的代码,此时我需要根据数据字典进行值映射,添加对应的数据字典到库中,好的页面开发完成。这个时候打包部署,页面显示异常,要现在来说很明显是部署后的测试库或生产库数据字典的问题,但我们很可能因为一个小的疏忽花费大量的时间去解决

* 变量赋值成功,但页面无法显示

场景说明:

data:{A:null,B:null,C:null}//有ABC两个字段,假设A字段为登录名,B字段为所属部门,需要通过选择A来得到B的值,C用来保存其他信息

新增和修改共用一套组件

因为新增和修改公用一套组件,为了防止修改后新增表单元素出现上次修改的值,所以我需要在点击新增的时候,初始化data:

data={}//出错原因

设置初始化之后,选择下拉框A的值,通过监听事件给B赋值,但页面没有改变显示,反复查看,B已经得到了值

造成错误的原因就是因为初始化的方式不对,在初始化时我直接为data重新赋值,相当于原来的data已经不存在了,原来的ABC也不存在了,所以VUE无法去监听B发生了变化无法刷新页面,因为他根本就是两个B

解决办法:
写一个通用的clear方法

clearData(data){
  for(var k in data){
    data[k]=null;
  }
  return data;
}
* 后续如遇到其他类型的错误会持续更新...

发表评论

电子邮件地址不会被公开。 必填项已用*标注