javascript - BootstrapVue 访问 slot 模板中的 b-table 行数据

Question

我在每一行上都有一个删除按钮，我需要从项目中获取 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>

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