第一次开发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这个属性。
<el-col :span="11">
<el-date-picker
v-model="exportForm.departDateBegin"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0"
style="width: 100%">
</el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-date-picker
v-model="exportForm.departDateEnd"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1"
style="width: 100%">
</el-date-picker>
</el-col>
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"这么个属性。加进去：
<el-date-picker
v-model="exportForm.departDateEnd"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1"
value-format="yyyy-MM-dd"
style="width: 100%">
</el-date-picker>
果然传值格式对了，但是，: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或更低版本→_→
网友评论