Highlight selected button when clicked in Vue

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

Raphael Parreira · Accepted Answer · 2019-01-24 18:32:01Z

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

ebbishop · Accepted Answer · 2019-01-24 18:04:11Z

0

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

edited Jan 24, 2019 at 18:04

answered Jan 24, 2019 at 17:58

ebbishop

2,0132 gold badges24 silver badges55 bronze badges

Collectives™ on Stack Overflow

Highlight selected button when clicked in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related