Necesito seleccionar varios botones que aparecen dinámicamente al hacer clic. Cada botón en el que se hace clic debe cambiar de color. Cualquier botón en el que se haga clic OTRA VEZ debe volver al color anterior. No puedo usar ninguna devolución de llamada de atributo HTML o Jquery. Esto solo puede usar etiquetas de estilo, bootstrap o vue. ¿Alguien puede ayudarme por favor?
Configuración actual:
<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>Honestamente, si alguien pudiera decirme cómo hacer esto con un botón, sería útil.
Suponiendo que la clase btn-warning tiene el color: red y la clase ten-success tiene el color: green . Ahora, con un clic de los botones, puede alternar entre estas clases.
Mantenga una matriz para contener los valores booleanos para cada uno de estos botones
data() { return { clickBools = [false, false, false, false....], // upto number of genres // other attributes }; }y un metodo
methods: { filterOne(index) { this.clickBools[index] = !this.clickBools[index]; } }y en la plantilla, haga los siguientes cambios
<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>