iview的Modal设置loading,下次点击失效的问题

因业务需要,在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() ,问题就解决了

猜你喜欢

转载自blog.csdn.net/qq_34733308/article/details/84135294