Bootstrap Vue Table: Show Details When Row Clicked


Answer :

Hard to find... but just add this:

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)" 

Explanation

The $set preserves the reactivity even if _showDetails didn't exist.

It's a pitty that the row object is not accessible, so toggleDetails is not an option here.


As mentioned on the row details support section of the Bootstrap Vue table documentation, you can change the _showDetails property of the row item:

If the record has it's _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.

In your case, you would want something like:

expandAdditionalInfo(row) {   row._showDetails = !row._showDetails; }, 

As demonstrated in this codepen


Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable