输入@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()
      }
    })
  }
}