在keyup Vuejs 2上获取输入值答案

【问题标题】：Get input value on keyup Vuejs 2在keyup Vuejs 2上获取输入值
【发布时间】：2018-01-02 01:10:25
【问题描述】：

我正在尝试使用 Vuejs 2 获取 keyup 上的输入值，但总是得到一个空结果，如数据。请看下面的代码。

HTML：

<input type="email" @keyup="this.$data.email= $event.target.value" class="form-control" id="email" placeholder="Username (your work email)">
<button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button>

脚本：

data () {
  return {
    email: '',
  }
},
methods: {
  submit () {
    alert(this.$data.email)
  }
}

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

你需要引用email（不是this.$data.email）：

<input type="email" @keyup="email = $event.target.value" class="form-control" id="email" placeholder="Username (your work email)">

而且，为什么不使用v-model 将email 绑定到输入？

new Vue({
  el: '#app',
  data () {
    return {
      email: '',
    }
  },
  methods: {
    submit () {
      alert(this.email)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <input type="email" v-model="email" class="form-control" id="email" placeholder="Username (your work email)">
  <button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button>
</div>

【讨论】：

【解决方案2】：

@keyup.enter.native="submitMETHOD"

【讨论】：

请简要说明您的建议。