Highlight selected button when clicked in Vue - html

Question

I have a button that shows a table when clicked on. That's done with bootstrap vue. I made some :hover in the css that highlights it, but i want to keep it highlighted while the table is shown.
the button and table look like this:
<b-btn v-b-toggle.collapse1 class="toggle-table-btn">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
and the css
.container .table-box .toggle-table-btn:hover {
background-color: rgb(63, 63, 63);
color: white;
}

Answer 1

You can apply a class on a html object dynamically. Then, you can create a new class that does the same that hover does, and apply this new class to your button.
You will need a support variable, to handle the table status collapsed or not, I called this support variable as highlightButton
In your css, you can "reuse" you hover class declaration for your highlight
.container .table-box .toggle-table-btn:hover, .toggle-table-btn.highlight {
background-color: rgb(63, 63, 63);
color: white;
}
When you click the button, #click changes the highlightButton's value, then your class is applied or not.
<b-btn v-b-toggle.collapse1 #click.prevent="highlightButton = !highlightButton" :class="['toggle-table-btn', highlightButton ? 'highlight' : '']">Cardboard size</b-btn>
<b-collapse id="collapse1" class="mt-2">
<b-table striped hover :items="(( table ))"></b-table>
</b-collapse>
the component data
data: function {
return {
highlightButton: false
}
}

Answer 2

Make use of the v-model support for the collapse component. This way you can explicitly track whether the table is currently visible or not using a data attribute (showTable in my example). You can then use showTable to add an extra class to your button dynamically. Use this class to highlight the button while the table is visible.
See this working example:
https://jsfiddle.net/ebbishop/304jws9m