将数据从输入传递到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将数据属性绑定到输入,并在您的方法中引用它(请参阅此小提琴):

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

Answer 2

解决方案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（webpack2示例）导入jQuery

VueJS

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