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

原文由 Hitendra 发布，翻译遵循 CC BY-SA 4.0 许可协议

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()
      }
    })
  }
}

原文由 Erick Petrucelli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Nisarg Shah 发布，翻译遵循 CC BY-SA 3.0 许可协议