保持按钮的颜色 onclick UNTIL new click

Question

我需要 select 多个在点击时动态显示的按钮。单击的每个按钮都需要更改颜色。再次单击的任何按钮都需要返回到旧颜色。我不能使用任何 HTML 属性回调或 Jquery。这个只能用style标签，bootstrap，或者vue。谁能帮帮我？

当前设置：

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

老实说，如果有人能告诉我如何使用一个按钮完成此操作，那将很有帮助。

Answer 1

假设 btn-warning class 有 color: red 和 ten-success class 有 color: green。现在，只需单击一下按钮，您就可以在这些 class 之间切换。

维护一个数组以包含每个按钮的布尔值

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

和一个方法

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

并在模板中进行以下更改

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

保持按钮的颜色 onclick UNTIL new click

Keep button a color onclick UNTIL new click

html

javascript

button

vue.js

bootstrap-4