'How do I pass input text using v-on:change to my vue method?

How can I pass the input value from my html to my vue method called checkEx ist() ? I would like to retrieve that value within my checkExist() method. Could any advice how I can do this? I am still new to vue.

HTML:

<input type="text" class="form-control" placeholder="Email*" v-model="form.email" v-validate="'required|email'"  v-on:change="checkExist">

VUE ELEMENT:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
       checkExist:function(){
       }
  }
})
javascripthtmlvue.jsecmascript-6


Solution 1:[1]

The v-model should already bind that input event.

But you can pass the event to v-on:change like this:

v-on:change="event => checkExist(event)"

Check exist would need to accept the event as a parameter. The value of the input will now be accessible inside the vue function via event.target.value.

checkExist: function(event){
    let value = event.target.value
}

Solution 2:[2]

Simpler even more, you don't need to pass the entire event to your handler function.

@change="checkExist($event.target.value)"

.

checkExist: function(value){
    
}

Solution 3:[3]

We could do it in ES6 syntax without using 'v-model' as below

<input v-on:change="(event) => inputValue = event.target.value" :value="inputValue" type="text"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ben
Solution 2 Dylan Maxey
Solution 3 webdevz

Related Questions