如何使用 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 元素：

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

原文由 ApplePie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，您还需要在 --- 中定义 form:{email:"", ...} data

在 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>

原文由 Helping hand 发布，翻译遵循 CC BY-SA 4.0 许可协议

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
}

原文由 Ben 发布，翻译遵循 CC BY-SA 4.0 许可协议