单击时如何更改 Bootstrap Vue 按钮样式复选框的变体

Question

我在我的一个 Vue JS 项目中使用了引导按钮样式的复选框，它可以正常工作并且应该可以正常工作，但是，我希望按钮样​​式的复选框变体在单击时从 outline-secondary 更改为 success。

有人可以就如何实现这一点提出建议吗？

下面是一个代码 sn-p 显示默认为 outline-secondary 变体的选项。

<template>
  <div>
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: [],
      options: [
        {text: '1 week', value: '1 week'},
        {text: '1 month', value: '1 month'},
        {text: '1 year', value: '1 year'},
        {text: '1 decade', value: '1 decade'}
      ]
    }
  }
}
</script>

任何帮助将不胜感激。

干杯，

蚂蚁

Answer 1

我对此最快的解决方案是：

  <div class="my-buttons">
    <b-form-group>
      <b-form-checkbox-group v-model="selected"
                             buttons
                             button-variant="outline-secondary"
                             name="buttons2"
                             :options="options">
      </b-form-checkbox-group>
    </b-form-group>
  </div>


<style>
  .my-buttons .active {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
  }
</style>

我添加了父类 my-buttons 和重叠类 .active。因为当您单击复选框时，您的复选框将获得该 .active 类并被选中。