web-dev-qa-db-fra.com

Bootstrap Vue: afficher les détails lorsque la ligne est cliquée)

Essayer d'obtenir une expérience différente de celle de la documentation: afficher les détails de la ligne non pas en cliquant sur le bouton, mais lorsque la ligne est cliquée. Et la documentation est un manque de détails sur la façon de le rendre différent comme dans les exemples.

<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>

Voici ma fonction mais je pense que ça ne marche pas du tout

expandAdditionalInfo(row) {
  row.showDetails();
}
javascriptvue.jsbootstrap-vue
9
anton zlydenko

Difficile à trouver ... mais ajoutez simplement ceci:

@row-clicked="item=>$set(item, '_showDetails', !item._showDetails)"

Explication

Le $set préserve la réactivité même si _showDetails n'existait pas.

C'est dommage que l'objet ligne ne soit pas accessible, donc toggleDetails n'est pas une option ici.

1
estani