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

Question

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(){
       }
  }
})

Solution 1

First you need to define form:{email:"", ...} in the data as well.
Pass $event inside checkExist() .
Something like this,

function callMe() {
  var vm = new Vue({
    el: '#root',
    data: {
     form:{email:""},
     email:""
    },
    methods: {
       checkExist(event){

         this.email=event.target.value;

       } 
    
    }

  })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id='root'>
 
 <input type="text" @input="checkExist($event)" class="form-control" placeholder="Email*" v-model="form.email">
<p>email:  {{email}}</p>
</div>

Solution 2

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 3

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

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

.

checkExist: function(value){
    
}

Comments

[ApplePie]

I get the following error. ReferenceError: checkExist is not defined