在Vue.js中处理Enter键

JavaScript

乐米亚

2020-03-11

我正在学习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功能至少先触发才能捕获它。但是,这似乎没有发生。我究竟做错了什么?

第538篇《在Vue.js中处理Enter键》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
阿飞飞云 2020.03.11

此事件对我有用:

@keyup.enter.native="onEnter".

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android