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函数至少先触发，以便我可以捕获它。但是，这似乎并没有发生。我做错了什么？

Answer 1

在第2期，您可以使用v-on:keyup.enter来检查输入事件，请查看文档：

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

我留下非常简单的示例：

＆＃13;

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

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

＆＃13;

祝你好运

Answer 2

事件修饰符

您可以在vuejs中引用event modifiers以阻止在enter密钥上提交表单。

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

虽然我们可以在方法中轻松完成这项工作，但如果方法完全是关于数据逻辑而不是必须处理DOM事件细节，那就更好了。

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

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

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

Here是一个工作小提琴。

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>

Answer 3

你在最后一行之前忘了'}'（关闭“方法{...”）。

此代码有效：

- (void) settingPage // here you have single space before method name your should write method like

- (void)settingPage
{

}

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

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

Answer 4

对于输入事件处理，您可以使用

@keyup.13或
@keyup.50

13是enter的键控代码。对于@键事件，键代码为50。因此，您可以使用<input @keyup.50="atPress()" />。

例如：

public class CustomFilter : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {   
            //In case you need it to log which one has been accessed for example
            Controller controller = filterContext.Controller as Controller;

            //Do your code...

            //Continue to the action
            base.OnActionExecuting(filterContext);
        }
    }

Answer 5

此活动对我有效：

Answer 6

您还可以通过以下方式将事件传递给子组件：

<CustomComponent
    @keyup.enter="handleKeyUp"
/>

...

<template>
    <div>
        <input
            type="text"
            v-on="$listeners"
        >
    </div>
</template>

<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('listeners', this.$listeners)
    },
}
</script>

如果您有一个传递组件并希望侦听器转到特定元素，那么这很有效。

Answer 7

您缺少方法的右大括号

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';
    }
  }//add this closing bracket and everything is fine
});

处理Vue.js中的Enter键

7 个答案:

事件修饰符