javascript - vue.js 箭头键绑定(bind)问题

Question

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

我创建了 a simple alert test (并在我的问题底部附上我的代码)来证明我面临的问题。使用 v-on:click 时，我创建的警报方法运行良好。我试过使用 v-on:keyup、v-on:keydown 和 v-on:keypress 两个选项都没有触发警报表示箭头键功能正常。

我发现了这个 3+ year old thread详细说明了一个类似的问题，其中一条评论描述了我使用的方法是自 v1.0.0 以来的有效解决方案。我检查过 the key modifier documentation当前版本的 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)事件。

为此，应将 native 事件监听器添加到组件的处理程序中:

JSFiddle