Javascript vue.js arrowkey绑定问题

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

我已经创建了（并在我的任务底部附加了我的代码）来演示我所面临的问题。使用

v-on:click

时，我创建的警报方法工作得非常好。我尝试过使用

v-on:keyup

、

v-on:keydown

和

v-on:keypress

，但这两个选项都没有触发警报以指示箭头键功能正在工作

我发现这详细说明了一个类似的问题，其中一条评论描述了我自v1.0.0以来一直作为有效解决方案使用的方法。我已经检查了Vue的当前版本，似乎我做的每件事都是正确的

我很可能错过了一些关键的东西，但经过大量的实验和研究，我可能需要一些帮助。提前谢谢

newvue({
el:“应用程序”，
方法：{
popupLeft:function（）{
警报（“您已进入上一页”）；
},
pop：函数（）{
警报（“您已进入下一页”）；
},
popupClose:函数（）{
警报（“您已关闭此页面”）；
},
}
})

前页
下一页
关闭页面

您的代码正常工作

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

原因是您已将

@keyup

侦听器添加到按钮，这意味着只有当

按钮

元素处于焦点且

@keyup

事件触发时，才会对其进行处理

为了使用箭头导航，应该从

窗口

或

文档

处理

键向上

（或

键向下

）事件

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

---

您的代码工作正常。你只需要点击相应的按钮，这样它就能获得焦点。否则它不会收到关键事件。我现在明白了，谢谢！我希望避免使用额外的javascript来让它工作，但看起来没有办法。我现在感觉不那么疯狂了