Vue爬坑之路二：开发中遇到的坑

第一次开发Vue+element ui遇到各种错误
开个笔记记录一下坑但是写的比较混乱
本人是个小白不对之处恳请大神指点
不定期更新不定期更新不定期更新

---

上回说到配置完毕开发环境。具体开发代码vue的官网和element ui的官网写的都很清楚。就不赘述了。
本篇主要记录一下开发过程中卡的比较久的各种错误。

---

一

错误：跨域问题。开http://localhost:8090/，登录报错如下。
一上来就遇到Access-Control-Allow-Origin的错误，一开始报的是No 'Access-Control-Allow-Origin' header is present on the requested resource.后来通过main.js已经加了axios.defaults.withCredentials = true，后台配置了header解决了。
结果现在报了个新错。

error1.png

仔细看发现是 .....has a value 'http://127.0.0.1:8090' that is not equal to the supplied origin. Origin 'http://localhost:8090' is therefore not allowed access.
好像是因为，浏览器不会解析localhost，改成本机IP后成功访问。
解决方法：http://本机IP地址:8090。

---

二

错误：登录成功后，提交表单报错如下。

error2.png

一开始以为又是跨域，纠结了一整天。
Axios提交是这么写的。查了各种代码觉得没写错。

axios.png

然后发现传个单值就过得去，传postData死活过不去。
后来发现错误出在form里面的gender的值。

dom.png

um。。。因为element ui里radio的label跟value是一样的，也就是我传过去的value是“男”“女”，然而后台设定只接受1和2.(((ﾟДﾟ;)))。。。开发经验不足不知道400是干啥的尴尬。。。400其实是数据格式错误。
所以传输数据与后台一定要约定好格式。
解决方法：改radio的label为数字。

---

三

错误：element ui datepicker 的format-value和:picker-options不能同时生效。
这个不能算vue的坑，应该是element ui的坑。感觉应该有人跟我一样遇到过但是百度没百度到，也可能对大神来讲不算坑。。。

DatePicker.png

需求是选个时间段然后向后台传时间。
先说 :picker-options，为了限制可选日期，在控件中加了 :picker-options这个属性。

    
    

-

    
    

Data里面写了:picker-options的判断。

//判断日期选择框
pickerOptions0: {
  disabledDate:(time) => {
    return time.getTime() > this.exportForm.departDateEnd;
  }
},
pickerOptions1: {
  disabledDate:(time) => {
    return time.getTime() < this.exportForm.departDateBegin;
  }
},

结果在向后台传输数据的时候，数据格式不对：
Tue Feb 06 2018 00:00:00 GMT+0800 (中国标准时间)
而后台需要yyyy-MM-dd的格式。
PS：网上有说加@change事件然后写个方法把值赋给v-model绑定的变量，但是我加了@change的方法发现没有用现在还不知为何。
查了一下element ui api发现有value-format="yyyy-MM-dd"这么个属性。加进去：

果然传值格式对了，但是，:picker-options不起作用了O.O
想了半天，感觉应该是value-format把格式变成了"yyyy-MM-dd"这样的String，但是原本的格式是Tue Feb 06 2018 00:00:00 GMT+0800 (中国标准时间) 这样的Object。
于是，索性不用value-format，提交表单的时候自己用js转吧。

let _self = this;  
let d2 = _self.exportForm.departDateEnd; //原数据
let Date2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate();  
console.log(Date2);

这样把Date2传过去格式是对的了。
解决方法：用js的getFullYear()等方法格式化日期。

---

四

错误：resetFields()重置表单报错及不生效。
这是个傻问题。但是新手很容易遇到，我记录一下。
我们点击新增按钮的时候，希望表单重置。
用了_self.$refs[formName].resetFields();的方法，结果每次第一次点击报错。
Cannot read property 'resetFields' of undefined"

error.png

是因为第一次点击按钮时，dialog对象还没有生成。
所以得加一下判定：

addClick:function(formName) {  
    let _self = this;  
    if (_self.$refs[formName] != undefined) {
        _self.$refs[formName].resetFields();
    }
    this.editFormVisible = true;  
},  

不报错了，但有时候发现，有的表单没有清空。
这时一定要仔细核对model中绑定的数据字段和Dom里prop的数据字段是不是完全一致。我曾经因为一个写了username一个写了userName查了一下午bug。。。

---

五

错误：ie9下页面空白提示ReferenceError:‘index’未定义
查看版本发现vue2.5.16的v-for循环在IE浏览器上会报错
解决方法：使用vue2.5.15或更低版本→_→