web-dev-qa-db-ja.com

Bootstrap Vueテーブル：行をクリックすると詳細が表示されます

ドキュメントエクスペリエンスとは異なるものを実現しようとしています。ボタンをクリックするのではなく、行をクリックしたときに行の詳細を表示します。そして、ドキュメンテーションは、例のようにそれを変える方法の詳細の欠如です。

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

これが私の機能ですが、まったく機能していません

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

見つけるのは難しい...しかしこれを追加するだけです：

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

説明

$setは、たとえ_showDetailsは存在しませんでした。

行オブジェクトにアクセスできないのは欠点です。そのため、ここではtoggleDetailsはオプションではありません。

1
estani