javascript - How to use onfocusout function in vue.js?

Question

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.

question from:https://stackoverflow.com/questions/49974289/how-to-use-onfocusout-function-in-vue-js

Answer 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>