Bootstrap Vue table: show details when row clicked

Question

Trying to achieve different from documentation experience: showing row details not by clicking on the button, but when row clicked. And documentation is a lack of details on how to make it different as in examples.

<b-table     v-if="tableIsReady"     :items="deals"     :fields="fields"      :per-page="recordsPerPage"     no-local-sorting      @sort-changed="sorting"      responsive      flex      striped      hover     @row-clicked="expandAdditionalInfo"    >     <template slot="row-details" slot-scope="row">     <b-card>       <h1>hello</h1>     </b-card>   </template>  </b-table> 

Here is my function but I think it's not working at all

expandAdditionalInfo(row) {   row.showDetails(); } 

Answer 1

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.