vue如何解决click和blur冲突的问题啊

Question

<input @blur="checkName"/>   <button @click="submitform">提交</button>填完input信息直接点击提交，会触发blur 需要再点击一次提交才会触发submitform事件 如何解决啊

Answer 1

button按钮用touchstart事件代替click，这样两个方法都可以一起触发，但是touchstart事件会比blur先执行

Answer 2

首先，blur比onClick优先级高，那么blur里面验证，如果验证通过，就会继续执行onClick，如果验证不通过，将验证结果给onClick，在onClick里直接return.

如果是异步验证，请使用async await

Answer 3

你这么理解，什么情况失去焦点呢？ 就是你的input失去焦点的时候，所以你离开的时候点击了提交的按钮
你可以不要写 @blur 可以点击submitform的时候，获取到input的输入值

   <input v-model="Input_box"/>  <button @click="submitform">提交</button>

     data(){   return{      
                 Input_box:""
   }
}, methods:{
    submitform(){        
      console.log(this.Input_box);
    }
}

Answer 4

这个跟vue有毛关系？你点击按钮肯定是失去焦点了啊
我这里直接触发2个事件的啊！

<input @blur="checkName" v-model="val"/>
<button @click="submitform">提交</button>

var vm = new Vue({
    el: ".vueBox",    data: {        val:'',    
    },
    methods: {
        checkName(){
            console.log(1111111,this.val);
        },
        submitform(){
            console.log(222,this.val);
        },
    }

});

要不然你改

<input @keyup="checkName" v-model="val"/>