Add CSS class to button disabled by Vue

Viewed 929

I have the following button that gets disabled if the user is in the first page:

<button :disabled="page==1" v-on:click="page=1;run()" class="page-link" :class="{'disabled' : disabled}">First</button>

However i would like to add the class .disabled if said button is disabled by Vue. Is it possible to do this through Vue?

2 Answers

You can put the same condition directly to the class directive:

 :class="{'disabled' : page === 1}"

Try changing disabled to false in the onclick, something like this: v-on:click="page=1;run();!disabled" or v-on:click="page=1;run();disabled=false".

Related