由于公司项目需要，所以目前捣鼓了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,//点击申请取消按钮后loading
				btnText:'申请取消订单',
				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 = true
					console.log('sdasda'+this.show)
            	    $(".errorInput").css("border","1px solid red")
					$(".error").css("display","block")
					this.loading = false
					this.$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