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.

Html5 javascript
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

Previous: Phpword about wps and Microsoft Word 2010 compatibility issues caused by templates

Next: How to configure GIT and use GITHUB? in the new version of VSCODE

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu