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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>