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
Post a Comment