How does vue solve the conflict between click and blur?

<input @blur="checkName"/>
  <button @click="submitform"></button>
  
  

if you click submit directly after filling in the input information, it will trigger that blur needs to click submit again to trigger the submitform event.

Mar.25,2021

what does this have to do with vue? You must have lost focus when you clicked the button.
I directly triggered 2 events here!

<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);
        },
    }

});

clipboard.png

or you will change

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

if you understand it this way, what kind of situation loses focus? That's when your input loses focus, so when you leave, you click the submit button
you don't have to write @ blur, you can click submitform, and you get the input value of input

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

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

first of all, blur has a higher priority than onClick . Then the verification is performed in blur . If the verification is passed, the onClick, will continue to be executed. If the verification fails, send the verification result to onClick , and directly return .

in onClick .

if it is asynchronous validation, use async await

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e422-4f062.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e422-4f062.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?