vue+iview写个弹框

由于公司项目需要，所以目前捣鼓了vue+iview搭建了一个项目，用的环境都是1.0版本，，

在使用iview弹框中，由于需要先进行弹框中表单的验证，验证通过才调用后台接口，但是呢，，iview弹框中的确定按钮点击一下弹框就消失了，怎么办，要实现效果，各种翻看资料，最终解决办法如下:

<template><!--取消订单弹框和老板批准弹框--> <Modal        :visible.sync="show"        title="提示"        :loading="loading"        @on-ok="asyncOK">        <Row>            <i-col span="3"></i-col>        <i-col span="1" style="color:red;margin-top:7px;font-weight: bold">*</i-col>        <i-col span="2" style="margin-top:5px;">授权码</i-col>        <i-col span="6">         <input class="ivu-input errorInput" type="number"  v-model="code" placeholder="请输入" @blur="codeBlur">         <div class="fade-transition ivu-form-item-error-tip error" style="display:none;position: static">验证码错误</div>        </i-col>        <i-col span="3" style="margin-left:5px;">           <i-button type="primary" :loading="loadingBtn" @click="toLoading">        <span v-if="!loadingBtn">{{btnText}}</span>        <span v-else>{{btnText}}</span>    </i-button>        </i-col>        </Row>    </Modal></template><script type="text/javascript">import {orderService} from 'jo'export default {props:["show"],data(){return {loading:true,loadingBtn:false,//点击申请取消按钮后loadingbtnText:'申请取消订单',code:"",//验证码clearTime:"",//定时器countDownIndex:60,//60秒倒计时}},methods:{codeBlur(){if(this.code == ""){$(".errorInput").css("border","1px solid red")$(".error").css("display","block")}else{$(".errorInput").css("border","1px solid #d7dde4")$(".error").css("display","none")}}, toLoading(){            //调用发送验证码接口      //       let operName = window.sessionStorage.getItem("userName")// accountService.recommenderGetCode(operName,this.selectDelteOne.recommender,1)            this.countDown()            },            countDown(){   //倒计时   var that = this;   that.loadingBtn = true   that.btnText = that.countDownIndex+"秒"    that.countDownIndex--;  that.clearTime = setInterval(function(){  console.log(that.countDownIndex)       if(that.countDownIndex == 0){       that.countDownIndex = 60   that.btnText = "发送"   that.loadingBtn = false   window.clearTimeout(that.clearTime)       return false       }            that.btnText = that.countDownIndex+"秒"             that.countDownIndex--;        },1000) // }},asyncOK(){//提交if(this.code == ""){this.show = trueconsole.log('sdasda'+this.show)                $(".errorInput").css("border","1px solid red")$(".error").css("display","block")this.loading = falsethis.$nextTick(() => { this.loading = true;});return            }            this.$nextTick(() => {this.loading = true; }); // let operId = window.sessionStorage.getItem("crmUserId")   //       let operName = window.sessionStorage.getItem("userName")   //       if(this.isApply){   //        orderService.sendSingleUpdate03(this.data, 3, operName, operId, this.code).then(res => this.updateList(res.message))   //       }else{   //         orderService.sendSingleUpdate03(this.data, 2, operName, operId, this.code).then(res => this.updateList(res.message))   //       }}}}</script>

大概思路就是先命名一个变量loading，这里必须为true,然后在点击弹框的提交按钮的时候先把loading设置为false，然后必须加上

this.$nextTick(() => { this.loading = true;});就能实现效果啦，具体实现原理，这坑遇到了，就先记录下来

传送门-->https://github.com/iview/iview/issues/597#issuecomment-292422473