Question

我试图按下回车键调用方法，但它不起作用。代码如下。

<template>
  <div>
    <button @click="callEvent" @keyup.enter="callEvent"> Click </button>
  </div>
</template>

<script>
export default{
  methods:{
    callEvent(){
      console.log("Event called");
    }
  }
}
</script>

Answer 1

click事件已经使用 ENTER 键触发（在某些浏览器中也会触发 Space ，例如Chrome for desktop）。因此，您的代码只需要一个@click="callEvent"，一切都运行良好，因为焦点已经在按钮上：

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button @click="callEvent">Enter</button>
</div>

如果你想要任何 ENTER 触发按钮，即使它没有焦点，你应该将事件绑定到window对象，这可以在{{{ 1}} handler：

mounted

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  },
  mounted() {
    window.addEventListener('keyup', function(event) {
      if (event.keyCode === 13) { 
        app.callEvent();
      }
    });
  }
});

请记住，如果您使用单个文件组件，则<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <button>Enter</button> </div>关键字会公开该实例，该关键字可用于调用所需处理程序中的组件方法：

this

Answer 2

按钮上没有keyup事件。即使您专注于按钮并按Enter键，也会将其视为点击事件，而不是keyup.enter。

尝试将事件绑定到输入并且它可以正常工作。

或者，您可以使用jQuery（或Plain JS）绑定body元素上的keydown事件，并通过调用app.callEvent()来触发Vue方法。

var app = new Vue({
  el: "#app",
  methods: {
    callEvent() {
      console.log("Event called");
    }
  },
  mounted() {
    var self = this;
    window.addEventListener('keyup', function(event) {
      if (event.keyCode === 13) { 
        self.callEvent();
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <template>
  <div>
    <button @click="callEvent"> Click </button>
  </div>
  <input type="text"  @keyup.enter="callEvent" />
</template>

</div>

_{更新为使用mounted而不是依赖jQuery - 作为per Erick Petrucelli's answer，因为它允许引用没有全局变量的Vue组件。}

Answer 3

当使用window.addEventListener的本机JS时，我遇到不一致的结果。 VueJS本机支持修改键盘事件https://vuejs.org/v2/guide/events.html#Key-Modifiers

的行为

在我的情况下，由于按Tab键需要单独的行为，因此效果也更好。

您的输入看起来像这样，在每个键上/下按自定义修饰符

    <input 
        type="text" 
        class="form-control" 
        placeholder="Start typing to search..." 
        v-model="search_text" 
        @focus="searchFocus" 
        @blur="searchFocusOut"
        v-on:keyup.enter="nextItem"
        v-on:keyup.arrow-down="nextItem"
        v-on:keyup.arrow-up="nextItem"
        v-on:keydown.tab="nextItem"
    >

然后在NextItem中可以引用该事件，并获取每个键..或为每个键修饰符编写一个单独的函数。

输入@keyup事件不在Vue中工作

3 个答案: