Keep button a color onclick UNTIL new click

user_17362822 0
Viewed 50

I need to select multiple buttons that appear dynamically on click. Every button that is clicked needs to change color. Any button that is clicked AGAIN needs to go back to the old color. I cannot use any HTML attribute callbacks or Jquery. This can only use style tags, bootstrap, or vue. Can anyone please help me?

Current setup:

 <div>
                  <button class="btn btn-success" v-on:click="filterAll" style="margin:2px;">ALL</button>

                  <div class="btn-group btn-group-toggle"  v-for="gen in genreArr"   data-toggle="buttons">
                      <button  class="btn btn-warning"  v-on:click="filterOne(gen)"  style="margin:2px;">{{gen}}</button>

                  </div>

 </div>

Honestly, if anyone can even tell me how to do this with one button, that would be helpful.

bootstrap-4 vue.js button html javascript
1 Answers

Assuming that btn-warning class has the color: red and ten-success class has the color: green. Now one click of the buttons you can toggle between these classes.

Maintain an array to contain the booleans for each of these buttons

data() {
 return {
   clickBools = [false, false, false, false....], // upto number of genres
   // other attributes
 };
}

and a method

methods: {
 filterOne(index) {
  this.clickBools[index] = !this.clickBools[index];
 }
}

and in template, do the following changes

 <div>
                  <button class="btn btn-success" v-on:click="filterAll" style="margin:2px;">ALL</button>

                  <div class="btn-group btn-group-toggle"  v-for="(gen, index) in genreArr"   data-toggle="buttons">
                      <button  :class="['btn', {'btn-warning': !clickBools[index], 'btn-success': clickBools[index]}]"  v-on:click="filterOne(index)"  style="margin:2px;">{{gen}}</button>

                  </div>

 </div>
user_112811520
Related