vue.js 箭头键绑定问题

Question

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

我创建了一个简单的警报测试（并在我的问题底部附加了我的代码）来演示我面临的问题。 使用v-on:click时，我创建的警报方法工作得非常好。 我尝试使用v-on:keyup 、 v-on:keydown和v-on:keypress 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事件触发时 - 它才会被处理。

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

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

JSFiddle