title: How to close previous row details when clicking a new one in bootstrap vue?
body: <p>Following <a href="https://bootstrap-vue.org/docs/components/table#row-details-support" rel="nofollow noreferrer">Bootstrap Vue documentation</a>, I've following code:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-table :items=&quot;items&quot; :fields=&quot;fields&quot; striped responsive=&quot;sm&quot;&gt;
        &lt;template #cell(show_details)=&quot;row&quot;&gt;
          &lt;b-button size=&quot;sm&quot; @click=&quot;row.toggleDetails&quot; class=&quot;mr-2&quot;&gt;
            {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
          &lt;/b-button&gt;
  
          &lt;!-- As `row.showDetails` is one-way, we call the toggleDetails function on @change --&gt;
          &lt;b-form-checkbox v-model=&quot;row.detailsShowing&quot; @change=&quot;row.toggleDetails&quot;&gt;
            Details via check
          &lt;/b-form-checkbox&gt;
        &lt;/template&gt;
  
        &lt;template #row-details=&quot;row&quot;&gt;
          &lt;b-card&gt;
            &lt;b-row class=&quot;mb-2&quot;&gt;
              &lt;b-col sm=&quot;3&quot; class=&quot;text-sm-right&quot;&gt;&lt;b&gt;Age:&lt;/b&gt;&lt;/b-col&gt;
              &lt;b-col&gt;{{ row.item.age }}&lt;/b-col&gt;
            &lt;/b-row&gt;
  
            &lt;b-row class=&quot;mb-2&quot;&gt;
              &lt;b-col sm=&quot;3&quot; class=&quot;text-sm-right&quot;&gt;&lt;b&gt;Is Active:&lt;/b&gt;&lt;/b-col&gt;
              &lt;b-col&gt;{{ row.item.isActive }}&lt;/b-col&gt;
            &lt;/b-row&gt;
  
            &lt;b-button size=&quot;sm&quot; @click=&quot;row.toggleDetails&quot;&gt;Hide Details&lt;/b-button&gt;
          &lt;/b-card&gt;
        &lt;/template&gt;
      &lt;/b-table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          fields: ['first_name', 'last_name', 'show_details'],
          items: [
            { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
            { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
            {
              isActive: false,
              age: 89,
              first_name: 'Geneva',
              last_name: 'Wilson',
              _showDetails: true
            },
            { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
          ]
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>Full example could be found <a href="https://bootstrap-vue.org/docs/components/table#row-details-support" rel="nofollow noreferrer">here</a>.</p>
  <p>According to this example, if I click <strong>Show Details</strong> button on each of the row it will show its respective row detail, but I want it to close all previous rows upon clicking it and only open details of the currently clicked row.</p>
  <p>I know that looping through rows and setting <code>detailsShowing</code> to <code>false</code> can solve it like below:</p>
  <pre><code>this.rownames.forEach(item =&gt; {
    this.$set(item, 'detailsShowing', false)
  })
  </code></pre>
  <p>but I don't know how to do it. Thank You.</p>