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

【问题标题】：How do I pass input text using v-on:change to my vue method?如何使用 v-on:change 将输入文本传递给我的 vue 方法？
【发布时间】：2019-01-27 21:46:30
【问题描述】：

如何将输入值从我的 html 传递到我的称为 checkEx 的 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 元素：

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

【问题讨论】：

input 元素的v-model 应该可以从组件中的任何位置访问，因此您可以在checkExist 方法中检查this.form.email。
stackoverflow.com/questions/43529516/…
听起来像 @change="checkExist($event)" 或 @input="checkExist($event)"

标签： javascript html vue.js ecmascript-6

【解决方案1】：

更简单的是，您无需将整个事件传递给您的处理函数。

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

checkExist: function(value){
    
}

【讨论】：

【解决方案2】：

首先，您还需要在data 中定义form:{email:"", ...}。
在 checkExist() 中传递 $event。
像这样的，

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>

【讨论】：

【解决方案3】：

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

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

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

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

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

【讨论】：

我收到以下错误。 ReferenceError: checkExist 未定义