Get row element form row.clicked event

Question

I'm using Table from Bootstrap Vue, and I'm trying to display row details when clicking on a row.

I used row-clicked event as the doc said, but I don't find any row details with a toggleDetails method. So I don't even know how to open it and where toggleDetails come from.

There is a way to open this details row with row.clicked event ?

Or should I use another method to do this ?

Do you have some clues ?

EDIT

There is some code to illustrate a bit more my problem, there is my table with the details row.

<b-table
  v-if="items"
  :items="items"
  :fields="fields"
  show-empty
  striped
  hover
  responsive
  empty-text="There is no messages to show"
  class="col-sm-12 col-md-10"
  @row-clicked="test"
>
  <template
    slot="message"
    slot-scope="row"
  >
    {{ row.item.message }}
  </template>
  <template
    slot="row-details"
    slot-scope="row"
  >
    <code>{{ row.item.message }}</code>
  </template>
</b-table>

You can see the row.clicked event I use on the table, and then my methods where I'm trying to open the row details. It's a simple method with some console.log

methods: {
  test(item, index, event) {
    console.log(item, index, event);
  },
},

Answer 1

All you have to do is to place somewhere in your "base" row (probably in a row cell called actions) a button that calls the toggleDetails function for this specific row.

The code for this button and the details row should be like this:

<template slot="actions" slot-scope="row">
    <!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
    <b-button size="sm" @click.stop="row.toggleDetails">
        {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
    </b-button>
</template>
<template slot="row-details" slot-scope="row">
    <!-- Your row details' content here -->
</template>

You can find more examples and explanations in the documentation

If you want to show the row details by clicking anywhere in the row, firstly you should add a _showDetails variable to each item object:

items: [
    { foo: true, bar: 40, _showDetails: false },
    ...
    { foo: true, bar: 100, _showDetails: false }
]

Then you just have to add the proper functionality for the row-clicked event:

<b-table @row-clicked="onRowClicked" ...></b-table>

And in your component methods:

methods: {
    onRowClicked (item, index, event) {
        item._showDetails = !item._showDetails;
    }
}