BootstrapVue访问插槽模板中的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>

这里有另一个语法，破坏插槽数据：

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