如何在单击时更改Bootstrap Vue按钮样式复选框的变体
如何在单击时更改Bootstrap Vue按钮样式复选框的变体
提问于 2018-07-31 01:42:46
我在我的一个Vue JS项目中使用了bootstraps按钮样式的复选框，它工作正常，然而，我希望按钮样式的复选框变体在单击时从outline-secondary更改为success。
有人能建议一下如何实现这一点吗？
下面是一个代码片段，显示了默认到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>任何帮助都将不胜感激。
干杯,
蚂蚁
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-31 03:50:09
我对此最快的解决方案是：
<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类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51599545
复制相关文章
相似问题