title: Toggle detailed row in buefy table
body: <p>I have a buefy table with details. Whenever I click on a chevron, the detailed view of the according row shows. It would be much better in my case, to have only one detailed view open. The desired outcome is: Whenever I click on a chevron, that detailed view opens and all other close.</p>
  
  <p>In buefy, the opening of the detailed view is programmed like this:</p>
  
  <pre><code>&lt;td v-if="detailed"&gt;
      &lt;a role="button" @click.stop="toggleDetails(row)"&gt;
      &lt;b-icon
         icon="chevron-right"
         both
         :class="{'is-expanded': isVisibleDetailRow(row)}"/&gt;
      &lt;/a&gt;
   &lt;/td&gt;
  
  ...
  props: {
      ...
      detailed: Boolean
      ...
  }
  
  ...
  methods: {
      ...
      toggleDetails(obj) {
          const found = this.isVisibleDetailRow(obj)
  
          if (found) {
              this.closeDetailRow(obj)
              this.$emit('details-close', obj)
          } else {
              this.openDetailRow(obj)
              this.$emit('details-open', obj)
          }
  
          // Syncs the detailed rows with the parent component
          this.$emit('update:openedDetailed', this.visibleDetailRows)
      },
      openDetailRow(obj) {
          const index = this.handleDetailKey(obj)
          this.visibleDetailRows.push(index)
      },
  
      closeDetailRow(obj) {
          const index = this.handleDetailKey(obj)
          const i = this.visibleDetailRows.indexOf(index)
          this.visibleDetailRows.splice(i, 1)
      },
  
      isVisibleDetailRow(obj) {
          const index = this.handleDetailKey(obj)
          const result = this.visibleDetailRows.indexOf(index) &gt;= 0
          return result
      },
      ...
  }
  </code></pre>
  
  <p>I see that there is an update_event sent to the parent. Do I have to save the 
  visibleDetailRows and tell the Child component to close it, when the button is pressed again? How would I do that?</p>