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

Posted 2023-02-22

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

【英文标题】：How do I pass input text using v-on:change to my vue method?

【发布时间】：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。

***.com/questions/43529516/…

听起来像 @change="checkExist($event)" 或 @input="checkExist($event)"

【参考方案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 未定义