A beginner question and not sure if vuejs can do this.

If you press a spacebar I want to add a css class. In this case to show the div

In this code I try something but that didn't work

  <div @keyup.space:class="show" tabindex="0" >test</div>

/

A beginner question and not sure if vuejs can do this.

If you press a spacebar I want to add a css class. In this case to show the div

In this code I try something but that didn't work

  <div @keyup.space:class="show" tabindex="0" >test</div>

https://jsfiddle/j7zoa2du/

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Aug 27, 2019 at 9:31 F T asked Aug 27, 2019 at 8:48 F TF T 8811 silver badge1010 bronze badges 2

• press space bar in no where or in a input section? – Zubaer Haque Commented Aug 27, 2019 at 8:56
• @ZubaerHaque yes just by opening the page. i put tabindex in there so it will be focus on that div – F T Commented Aug 27, 2019 at 9:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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.

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)