Vue.js 将数据从输入传递到vue'；s函数

我想从输入端传递数据：

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

我尝试使用

this

或

this.value

作为参数，但不起作用

---

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

希望这个例子能帮助您-

<div class="form-register" :class="{ 'active': active == 'register' }" id="form-register">
        <div class="error-message" v-text="registerError"></div>
        <input type="text" name="name" placeholder="Name" v-model="registerName" @keyup.enter="submit('register', $event)" required>
        <input type="email" name="email" placeholder="Email" v-model="registerEmail" @keyup.enter="submit('register', $event)" required>
        <input type="password" name="password" placeholder="Password" v-model="registerPassword" @keyup.enter="submit('register', $event)" required>
        <input type="submit" :class="{ 'disabled': submitted == 'register' }" @click="submit('register', $event)" v-model="registerSubmit" id="registerSubmit">
        <div class="links"> <a href="" @click="flip('login', $event)">Already have an account?</a>

        </div>
      </div>

---

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

HTML

解决方案2：使用jQuery

HTML

---

您可以使用

v-model

将数据属性绑定到输入，只需在方法（）中引用该属性即可：

或者，您可以使用特殊的内联

$event

属性，该属性提供对目标元素值（）的引用：

---

您也不需要显式地将

$event

参数传递给

@

处理程序。您只需向处理程序传递方法名，第一个参数仍然是

$event

的值

像这样：

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

您的示例是否正确有效。只有几个语法错误，再加上一个方便的事实，即如果不在onkeyup中指定参数，就会得到所需的事件

加成

---

今年的更新和更优雅的方式：

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

这将记录输入值。

最简单的解决方案是：

HTML:

我不知道你为什么要在keyup事件中使用它，但如果你想这样做，用

@keyup

更改

v-model

，keyup是

v-on:keyup

的简短解决方案，长期使用它更好

app.js:

const-app=Vue.createApp({
数据（）{
返回{
输入消息：“”，
};
},
方法：{
AddMessage（）{
this.inputMessage/*请对其进行处理*/
},
},
});

解决方案1最适合我这正是我想要的。谢谢我的输入只需要

@property=“some_function（$event）”

并在函数

some_function（e）{console.log（e）}

中读取它。在本例中，

e

已经是目标值。

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

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

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

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

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

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

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

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

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

<div id='ctr'>
  {{message}}
  <input  id="txtName" v-on:keyup.enter="addMessage" type="text">
</div>

var vm = new Vue({
  el : '#ctr',
  data : {message: 'hello cobber'},
  methods: {
    addMessage: function(event){
      debugger;
      alert(event.target.value)
      //stuff
    }
  }
});

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

methods: {
  addMessage({target}) {
    console.log(target.value);
  }
}