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