使用 @keyup 事件输入在 Vue 中不起作用

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）。因此，您的代码只需要 @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 对象，该对象可以在 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 关键字公开，可用于调用所需处理程序内的组件方法：

export default {
  methods: {
    callEvent() {
      console.log('Event called')
    }
  },
  mounted() {
    window.addEventListener('keyup', event => {
      if (event.keyCode === 13) { 
        this.callEvent()
      }
    })
  }
}

Answer 2

在使用带有 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 中，您可以引用该事件，并获取每个键.. 或为每个键修饰符编写一个单独的函数。

Answer 3

按钮上没有 keyup 事件。即使您将注意力集中在按钮上并按 Enter 键，它也会被视为单击事件，而不是 keyup.enter。

尝试将事件绑定到输入，它会起作用。

或者，您可以使用 jQuery（或普通 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 组件。}