Add CSS class to button disabled by Vue

Question

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?

you can also put the same condition directly to the class directive: :class="{'disabled' : page === 1}" — Serg
– Serg, Commented Dec 31, 2020 at 11:28
@Serg That worked, could you please create an answer so I can mark it as correct? — Mathias Hillmann
– Mathias Hillmann, Commented Dec 31, 2020 at 11:38

Serg · Accepted Answer · 2020-12-31 11:42:35Z

5

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

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

answered Dec 31, 2020 at 11:42

Serg

8457 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul B. Over a year ago

It's an older answer, but thank you! This helped me.

Adam · Accepted Answer · 2020-12-31 11:14:33Z

-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".

answered Dec 31, 2020 at 11:14

Adam

799 bronze badges

1 Comment

Mathias Hillmann Over a year ago

I dont have a disabled variable or prop, only the bind on the disabled attribute in the html to be disabled if a condition is met :disabled="page==1"

Collectives™ on Stack Overflow

Add CSS class to button disabled by Vue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related