BootstrapVue 访问槽模板中的 b 表行数据答案

【问题标题】：BootstrapVue access b-table row data in slot templateBootstrapVue 访问槽模板中的 b 表行数据
【发布时间】：2020-08-05 00:39:24
【问题描述】：

我在每一行都有一个删除按钮，我需要从项目中获取log_id 以传递给函数deleteLog。该函数总是提醒log_id 是undefined。

如何在没有undefined 的情况下将log_id 传递给函数deleteLog？

<template>
    <b-table striped hover :items="items" :fields="fields">
        <template v-slot:cell(Delete)>
            <b-button variant="danger" v-on:click="deleteLog(log_id)">Delete</b-button>
        </template>
    </b-table>
</template>

<script>
export default {
    data() {
        return {
            fields: ['Year', 'Month', 'Round', 'Name', 'Delete', 'log_id'],
            items: []
        }
    }
}
</script>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

您可以通过槽数据访问行数据及其log_id：

<b-table striped hover :items="items" :fields="fields">
    <template v-slot:cell(Delete)="data"> <!-- `data` -->
        <b-button variant="danger" v-on:click="deleteLog(data.item.log_id)">Delete</b-button>
    </template>
</b-table>

这是另一种语法，destructuring 槽数据：

<b-table striped hover :items="items" :fields="fields">
    <template v-slot:cell(Delete)="{ item }"> <!-- `item` -->
      <b-button variant="danger" v-on:click="deleteLog(item.log_id)">Delete</b-button>
    </template>
</b-table>

【讨论】：