v-on click and keyup

[mocheaz]

I have a gallery with "next" and "previous" buttons.

Here what i have now

<a href="#" v-on="click: previous">Previous</a>
<a href="#" v-on="click: next">Next</a>

I want them to work with 2 options.

1. Clicking on the link.
2. Clicking on left/right arrows on keyboard.

I tried

<a href="#" v-on="click: previous, keyup: previous | key 'left' ">Previous</a>
<a href="#" v-on="click: next, keyup: next | key 'right' ">Next</a>

But this didn't work.

Is this possible with vue.js?

[yyx990803]

This is because global keypress events are not dispatched on your <a> elements. It's better to handle global keypress events separately, e.g. attach listeners to window in your component's ready event.

[mocheaz]

Sorry to being novice...

Any example code how to do this?...

[yyx990803]

{
  created: function () {
    window.addEventListener('keyup', this.previous)
  },
  methods: {
    previous: function (e) {
      // check key code
    }
  },
  beforeDestroy: function () {
    // remove listener
  }
}

[martijn33]

for vue 1.0.0 use this syntax

<a href="#" v-on:click="previous" v-on:keyup.left="previous">Previous</a>

see also : https://github.com/vuejs/vue/releases
scroll to: full changelog(from 0.12.16) > 1.Directive Arguments

[sagalbot]

@martijn33 that syntax does not seem to work on static elements, only form inputs.

@yyx990803 is the proper way to achieve this in v1.0.16 still to bind listeners to the body?

[PrimozRome]

@sagalbot I would like to know this too. Did you find any solution?

I have seen that Koel project uses what you purposed, but I have tried implementing key events like this in my app but does not work... From Koel app.vue

    <template>
        <div id="app" tabindex="0" v-show="authenticated"
            @keydown.space="togglePlayback"
            @keydown.j = "playNext"
            @keydown.k = "playPrev"
            @keydown.f = "search"
            @keydown.177 = "playPrev"
            @keydown.176 = "playNext"
            @keydown.179 = "togglePlayback"
        >
            <site-header></site-header>
            <main-wrapper></main-wrapper>
            <site-footer></site-footer>
            <overlay :state.sync="overlayState"></overlay>
        </div>

        <div class="login-wrapper" v-else>
            <login-form></login-form>
        </div>
    </template>

I have tried adding key events similarly to my app.vue but they are just not triggered?

[phanan]

@PrimozRome Koel's author here. The reason it works for my app lies in tabindex="0" and that the div#app is a full-page element. Basically setting a tabindex makes the element "focusable" and reactive to key events. Let's not drag this thread longer though – Vue's repo is meant for bug reports and feature requests only. Will be happy to help you on Gitter.