javascriptvue.jselement-plus

How to change the color of a button inside a sub-menu using vue js3 and element-plus

I've created a button in a sub-menu which when clicked should be able to change color

But whatever I do doesn't work.

This is the code for the button

I've added more code Link to Vue playground where you can find the code

Also i would like to change the color of the active checkbox to this rgba(134, 154, 31, 1)

This is how it is supposed to look I tried using checkbox it didn't also work out.

Solution

  • I think you should use :class for this case. Example:

    <button 
  :class="isActive == true ? 'active' : ''" 
  @click="toggleActive"
> Active </button>