I have a input :
<a-form-item label="user" :colon="false">
<a-input placeholder="user" name="user" @keyup.enter="checkUser"/>
</a-form-item>
In methods:
checkUser() {
console.log('ok');
},
In methods : checkUser when i enter then i get the input value. But now I don't want to do that, I want when I finish entering the input value, move the cursor outside and methods : checkUser will get the value of that input. Thank you
Make use of blur event listener.
<a-input placeholder="user" name="user" @blur="checkUser"/>
Sample Fiddle
new Vue({
el: '#app',
data: {},
methods: {
checkUser: function(e) {
console.log("Blur event triggered", e.target.value)
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<input type="text" @blur="checkUser">
</div>If you want the method to get triggered while moving out the cursor then you can use @mouseleave event.
OR
If you want to trigger the method when the input loses focus then you could try using @blur event
new Vue({
el: '#app',
methods: {
checkUser(e) {
if(e.target.value !== '') { // To check if the input is not empty
console.log("event triggered", e.target.value)
}
return;
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<input type="text" @mouseleave="checkUser">
<!-- OR -->
<!--<input type="text" @blur="checkUser"> -->
</div>