I am in the process of building my first Vue.js project, and I would like to navigate between pages (prev page/next page) through the left and right keyboard arrow keys.

I've created a simple alert test (and attached my code at the bottom of my ask) to demonstrate the problem I'm facing. When using v-on:click, the alert method I created works perfectly fine. I've tried using v-on:keyup, v-on:keydown, and v-on:keypressand neither option triggered an alert to indicate the arrowkey functionality was working.

I discovered this 3+ year old thread detailing a similar problem, and one of the comments described the method I'm using as being a working solution since v1.0.0. I've checked the key modifier documentation of the current version of Vue and it seems as though I am doing everything correctly.

I'm most likely missing something crucial, but after much experimentation and research, I could use some help. Thanks in advance!

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/[email protected]/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>