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

Question

我想从输入传递数据：

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

到一个方法：

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

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

我应该如何解决这个问题？

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

Answer 1

解决方案 1：使用 v-model（首选）

HTML

 <input id="txtName" @keyup.enter="addMessage" v-model="txtInput" type="text">

VueJS

 data: {
    txtInput: ''
},
methods: {
    addMessage(){
      console.log(this.txtInput)
    }
}

解决方案 2：使用 jQuery

HTML

 <input id="txtName" @keyup.enter="addMessage('txtName')" type="text">

使用 import $ from jquery 导入 jQuery（webpack2 示例）

VueJS

 methods: {
    addMessage(id){
      console.log($('#txtName').val())
    }
}

原文由 Shubham Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 v-model 将数据属性绑定到输入，然后在您的方法中简单地引用它（ 参见this fiddle ）：

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

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

或者，您可以使用特殊的内联 $event 属性，它为您提供对目标元素值的引用（ 请参阅此小提琴）：

 <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);
  }
}

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