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

Question

我每行都有一个删除按钮，我需要log_id从 items 中获取数据以传递给 function deleteLog。该功能始终提醒的log_id是undefined。

如果没有 ，我如何传递log_id给函数？deleteLogundefined

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

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

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