CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentbootstrap-vue
GPService
GPService

Reputation: 329

BootstrapVue access b-table row data in slot template

I have a delete button on each row and I need to get log_id from items to pass to function deleteLog. That function always alerts log_id is undefined.

How can I pass log_id to the function deleteLog without 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>

Upvotes: 2

Views: 2535

Answers (1)

Dan
Dan

Reputation: 63059

You can access the row data and its log_id through the slot data:

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

Here's another syntax, destructuring the slot data:

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

Upvotes: 7

Related Questions