因业务需要,在modal弹出框中设置了from表单,并进行了表单验证,点击确定的时候出现问题,第二次点击确定一直显示loading状态,查阅资料后需要修改一下代码:
//点击Modal的确定按钮
okLog(){
this.$refs["addWorkLog"].validate(valid => { //from表单验证
if (valid) { //如果from表单验证通过
this.$axios.post("/api/xxx/xxx/xxx",this.$qs.stringify(this.addWorkLog)).then(msg=>{
//(this.$qs.stringify):使用qs插件序列化 POST传参需要
console.log(msg.data)
if(msg.data.result==0){ //判断后台传过来的状态码
this.modalLog = false;//关闭弹框
this.$Message.success("添加成功");
this.$refs["addWorkLog"].resetFields(); //重置表单
}else if(msg.data.result==1){
this.$Message.error(msg.data.errorMessage);
setTimeout(() => {
this.loadingLog = false; //改变loading状态
this.$nextTick(() => { //在数据修改之后立即使用这个方法,使用此方法可以避免出现的问题
this.loadingLog = true;
});
});
}
})
} else { //如果from表单验证不通过
this.$refs["addWorkLog"].resetFields();
setTimeout(() => {
this.loadingLog = false;
this.$nextTick(() => {
this.loadingLog = true;
});
});
}
});
},
解决方法:
其实只要加上 this.$nextTick() ,问题就解决了