vue.js - 将数据从输入传递到 vue 的函数

Question

我想从输入传递数据:

<input
  id="txtName" 
  type="text"
  v-on:keyup.enter="addMessage(/* THIS FIELD VALUE */)"
/>

方法:

methods: {
  addMessage(name) {
    //stuff
  }
}

我尝试使用 this 或 this.value 作为参数，但它不起作用。

我该如何解决？

Answer 1

您可以使用 v-model 将数据属性绑定(bind)到输入，并在您的方法 ( see this fiddle) 中简单地引用它:

<input v-model="message" @keyup.enter="addMessage()"/>

methods: {
  addMessage() {
    this.messages.push(this.message);
  }
}

或者，您可以使用特殊的内联 $event 属性，它为您提供对目标元素值 ( see this fiddle) 的引用:

<input @keyup.enter="addMessage($event)"/>

methods: {
  addMessage(e) {
    this.messages.push(e.target.value);
  }
}

---

您也不需要显式地将 $event 参数传递给 @ 处理程序。您可以只将方法名称传递给处理程序，第一个参数仍然是 $event 的值。

像这样:

<input @keyup.enter="addMessage"/>

methods: {
  addMessage(e) { // e is the value of $event
    this.messages.push(e.target.value);
  }
}