使用 @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>

请记住，如果您使用的是Single File Components ，则该实例由this关键字公开，可用于在所需的处理程序中调用组件方法：

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

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 -根据 Erick Petrucelli 的回答，因为它允许在没有全局变量的情况下引用 Vue 组件。}

Answer 3

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

由于 tab 键需要单独的行为，这在我的情况下也工作得更好。

您的输入看起来像这样，每个键上都有自定义修饰符 up|down

    <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 4

@keyup.enter="callEvent"

改成

@keypress.enter.prevent="callEvent"

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

参考： https ://github.com/vuejs/vue/issues/5171