Bootstrap Vue table: show details when row clicked

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

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.