处理 Vue.js 中的 Enter 键

Question

我正在学习 Vue.js。在我的 Vue 中，我有一个文本字段和一个按钮。默认情况下，当有人按下键盘上的 Enter 键时，此按钮会提交表单。当有人在文本字段中输入时，我想捕获每个按下的键。如果键是’@‘符号，我想做一些特别的事情。如果按下的键是“Enter”键，我也想做一些特别的事情。后者给我带来了挑战。目前，我有这个 Fiddle ，其中包括以下代码：

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

在我的示例中，如果不提交表单，我似乎无法按“Enter”键。然而，我希望 validateEmailAddress 函数至少首先触发，以便我可以捕获它。但是，这似乎并没有发生。我究竟做错了什么？

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

Answer 1

事件修饰符

您可以参考 vuejs 中的 事件修饰符 来防止在 enter 键上提交表单。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 非常常见。

虽然我们可以在方法内部轻松地做到这一点，但如果方法可以纯粹是关于数据逻辑而不是处理 DOM 事件细节会更好。

为了解决这个问题，Vue 为 v-on 提供了事件修饰符。回想一下，修饰符是用点表示的指令后缀。

 <form v-on:submit.prevent="<method>">
 ...
 </form>

正如文档所述，这是 e.preventDefault() 的语法糖，将在按下回车键时停止不需要的表单提交。

这 是一个工作小提琴。

 new Vue({
 el: '#myApp',
 data: {
 emailAddress: '',
 log: ''
 },
 methods: {
 validateEmailAddress: function(e) {
 if (e.keyCode === 13) {
 alert('Enter was pressed');
 } else if (e.keyCode === 50) {
 alert('@ was pressed');
 }
 this.log += e.key;
 },

 postEmailAddress: function() {
 this.log += '\n\nPosting';
 },
 noop () {
 // do nothing ?
 }
 }
 })

 html, body, #editor {
 margin: 0;
 height: 100%;
 color: #333;
 }

 <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
 <div id="myApp" style="padding:2rem; background-color:#fff;">
 <form v-on:submit.prevent="noop">
 <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
 <button type="button" v-on:click="postEmailAddress" >Subscribe</button>
 <br /><br />

 <textarea v-model="log" rows="4"></textarea>
 </form>
 </div>

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

Answer 2

在 vue 2 中，您可以使用 v-on:keyup.enter 查看文档：

https://v2.vuejs.org/v2/guide/events.html#Key-Modifiers

我留下一个 非常简单 的例子：

 var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

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