BootstrapVue доступ к данным строки b-таблицы в шаблоне слота

Question

У меня есть кнопка удаления в каждой строке, и мне нужно получить log_id от предметов, чтобы перейти к функции deleteLog. Эта функция всегда оповещает log_id: undefined.

Как мне передать log_id в функцию deleteLog без undefined?

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