[Vuejs]-VueJs 2.0 – When press spacebar add/activate CSS Class

by

2👍

✅

its should be like this

<div @keyup.space="activeClass=true" :class="{'mycls':activeClass}" tabindex="0" >test</div>

and in the data you should have

data(){
    return{
      activeClass:false
      //some other data you have
    }
  },

this will add the class mycls to div when spacebar is pressed (on the div)

👤eli chen

4👍

The below example only works if the div (or any other element you want to add the @keyup) has the focus. If you want to trigger the events globally, it’s worth checking out this package: https://www.npmjs.com/package/vue-global-events.

Once you added the package to your project, you could add this to your template section: 

<GlobalEvents @keyup.space="activeClass=!activeClass"/>

to toggle the active class or set it to true alternatively.

👤pacman

Leave a comment