如何使用 v-on:change 将输入文本传递给我的 vue 方法？

Question

如何将输入值从我的 html 传递给我的名为 checkEx ist() 的 vue 方法？我想在我的 checkExist() 方法中检索该值。任何建议我怎么能做到这一点？我还是 vue 新手。

HTML：

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

元素：

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

Answer 1

首先，你需要定义form:{email:"", ...}的data为好。
传递 $event 里面checkExist()。
像这样的东西，

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/vue@2.5.11/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>

Answer 2

v-model 应该已经绑定了那个输入事件。

但是你可以像这样将事件传递给 v-on:change：

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

检查存在需要接受事件作为参数。现在可以通过event.target.value在 vue 函数内部访问输入的值。

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