How to call a method every single time the field loses focus in vue.js

Question

This looks easy, but somehow wouldn't work. I have a text-field with an @blur listener to make a call to the server to check if the username typed exist in the database. Once the field loses focus, the method is called; if the username exists already, you get an error message which prompts you to enter a fresh username. All that works fine. However, if I move back into the field and correct the error by typing a username which doesn't exist, then I expect the method to be called again on losing focus from the field, so the new username can be checked, but that doesn't happen. So it looks like the @blur listener is called just once, the first time only. I have tried @focusout also. What am I doing wrong please?

<v-text-field label="Username" v-model="username" @blur="checkUsername"></v-text-field>

checkUsername method:

checkUsername(){
  if (this.username != '') {
         //make a call to the server to check if username exists, if it does, show error
  }
}

If you put `console.log("checkUsername called")` at the beginning of the function, do you see the log message? — Barmar, Aug 10 '23 at 21:12
You can try `@update:modelValue` also instead. https://vuetifyjs.com/en/api/v-text-field/#events-update:modelValue — Prerak Sola, Aug 10 '23 at 21:21
That would trigger every time the value is updated, while the goal is to check on blur. — Darryl Noakes, Aug 10 '23 at 21:36
A [mre] would be very helpful. Could you create something in a [Vue Playground](https://play.vue.js) or a StackBlitz? — Darryl Noakes, Aug 10 '23 at 21:38

score 0 · Answer 1 · answered Aug 11 '23 at 11:36

It should work fine, Every time field loses focus @blur event will get trigger. I just create a working sample demo for you. Can you please see and try to find the root cause of the issue you are facing.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      username: null
    }
  },
  methods: {
    checkUsername() {
      if (this.username != '') {
        console.log(this.username)
      }
    }
  }
})

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.7.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.7.1/dist/vuetify.min.css"/>
<div id="app">
  <v-text-field
    label="Username"
    v-model="username"
    @blur="checkUsername"
  ></v-text-field>
</div>

How to call a method every single time the field loses focus in vue.js

1 Answers1