vue.js 箭头键绑定问题

Question

我正在构建我的第一个 Vue.js 项目，我想通过左右键盘箭头键在页面（上一页/下一页）之间导航。

我创建了一个简单的警报测试（并在请求的底部附加了我的代码）来演示我面临的问题。使用时v-on:click，我创建的警报方法工作得很好。我尝试过使用v-on:keyup、v-on:keydown和v-on:keypress，但没有一个选项触发警报来指示箭头键功能正在运行。

我发现这个3 年多前的线程详细描述了一个类似的问题，其中一条评论描述了我自 v1.0.0 以来正在使用的方法作为可行的解决方案。我已经检查了当前版本的 Vue 的键修饰符文档，看起来我做的一切都是正确的。

我很可能错过了一些重要的东西，但经过大量的实验和研究，我可以使用一些帮助。提前致谢！

new Vue({
  el: "#app",
  methods: {
    popupLeft: function(){
        alert("You have gone to the previous page");
    },
    
    popupRight: function(){
        alert("You have gone to the next page");
    },
    
    popupClose: function(){
        alert("You have closed this page");
    },
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <button @keyup.left="popupLeft">Prev Page</button>
  <button @keyup.right="popupRight">Next Page</button>
  <button @click="popupClose">Close Page</button>
</div>

Answer 1

您的代码按预期工作。

如果您转到上面示例的 JSFiddle 并首先单击按钮，然后使用箭头 - 它将调用相应的事件。

原因是您已经@keyup向按钮添加了侦听器，这意味着，只有当button元素处于焦点并且@keyup事件触发时，才会对其进行处理。

为了使用箭头导航，keyup（或keydown根据我的喜好）事件应该从window或处理document。

为此，应将本机事件侦听器添加到组件的处理程序中：

JSFiddle