How to use onfocusout function in vue.js?
I want to call a function as soon as the cursor moves from one text box to next. The function call should be made when a tab is clicked or after the expected entries are entered and moved to next.
Solution 1:
You're seeking the blur
event, which occurs when the <input>
loses focus. Use Vue syntax to add a blur
-event listener on the <input>
:
v-on:EVENT_NAME="METHOD"
Example:
<input v-on:blur="handleBlur">
Or shorter syntax:
@EVENT_NAME="METHOD"
Example:
<input @blur="handleBlur">
new Vue({
el: '#app',
methods: {
handleBlur(e) {
console.log('blur', e.target.placeholder)
}
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<input @blur="handleBlur" placeholder="first name">
<input @blur="handleBlur" placeholder="last name">
</div>