Question

如何将html中的输入值传递给名为checkEx的vue方法 ist（）吗？我想在我的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(){
       }
  }
})

Answer 1

v模型应该已经绑定了该输入事件。

但是您可以通过以下方式将事件传递给v-on：change：

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

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

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

Answer 2

首先，您还需要在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>

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

2 个答案: