Change color of button and keep it when i clicked another button

Hi,

I have a stepper form with step

i have a button when it clicked i want to change color of button , but when i click next button of stepper form and return to my button the color disapear i want to keep changed color

explain :

i have a stepper form like this :

i have a list button : v-for like this

                  <div v-for="h in Dayhours" :key="h" class="d-flex flex-row justify-content-end">
                    <div style="margin-right: 3px; padding-left: 15px">{{ h }}
                    </div>
                    <div v-for="m in Dayminutes" :key="m" >
                      <Popper @mouseover="getTimeHover(h, m)" :hover="true" placement="top"
                        :content="heure_rdv_hover"
                        style="margin-right: 3px;height:28px;width: 0.5rem;cursor:pointer">
                        <button :class="[ { 'clicked': clicked} ]" v-on:click ="clicked = !clicked"  type="button" class="btn-style" />
                      </Popper>
                    </div>
                  </div>

and next button :
<button v-if=“step == 3” class=“btn btn–green-1 js-class” @click=“step++” v-show=“showbtn”
>
Suivant

when i click in every button of list it’s changed color of button , but when i click next button from stepper form the color disapear , and i want to keep it in all steps

please help me , if you have any question for more details tell me

Hi @Yadev7
You can use dynamic class to set bg color according to the step value.
I have created a project that you can use as a reference:

I hope this helps.

1 Like

Thak You so much :blush: