In my project, I have implemented a toggle feature using Vuetify's v-button-toggle with three buttons. Each button is supposed to have a different active class that changes when clicked. However, currently the respective active class is not being set when clicking on a button. Can anyone help me identify what I might be missing?
<v-btn-toggle
v-model="justify"
borderless
dense
group
class="d-flex flex-column "
>
<v-btn active-class="dnrSelected" exact>
<v-icon right class="mr-2">mdi-close</v-icon>
<span>Do Not Recommend</span>
</v-btn>
<v-btn active-class="rSelected">
<v-icon right class="mr-1">mdi-check</v-icon>
<span>Recommend</span>
</v-btn>
<v-btn active-class="srSelected">
<v-icon right class="mr-1">mdi-check-all</v-icon>
<span>Strongly Recommend</span>
</v-btn>
</v-btn-toggle>
Here are the CSS classes being used:
<style scoped>
.dnrSelected {
background-color: #e57373;
}
.rSelected {
background-color: #c5e1a5;
}
.srSelected {
background-color: #81c784;
}
</style>
An update: The expected class gets added to the button upon click.
<button type="button" class="v-btn srSelected v-btn--active v-btn--contained theme--light v-size--default"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mr-1 v-icon--right mdi mdi-check-all theme--light"></i> <span>Strongly Recommend</span></span></button>
Another update: There is a default Vuetify class overriding the custom styles applied.
.v-btn-toggle--group > .v-btn.v-btn {
background-color: transparent !important;
border-color: transparent;
margin: 4px;
min-width: auto;
}
I am looking for suggestions on how to override this default style class.