Here is my code snippet:
<b-table
hover
:items="usergroupTable.datas"
:fields="usergroupTable.fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
responsive="sm"
>
<template #cell(edit)="data">
<b-button @click="editItem(data.id)">Delete</b-button>
<b-button @click="editItem(data.id)">Edit</b-button>
</template>
</b-table>
Here are my datas:
data() {
return {
usergroupTable: {
filter: null,
fields: [
'edit',
{ key: 'usergroupname', label:'User Group Name' , sortable: true},
{ key: 'product', label:'Product' , sortable: true},
{ key: 'seatslimits', label:'Seats Limit' , sortable: true},
{ key: 'expirationdate', label:'Expiration Date' , sortable: true},
{ key: 'lastpayment', label:'Last Payment' , sortable: true},
{ key: 'nextpayment', label:'Next Payment' , sortable: true},
],
datas: [
{ id: 5 ,usergroupname: 'IUT Bordeaux', product: 'Light', seatslimits: '20', expirationdate: '2021/08/01', lastpayment: '', nextpayment: '' },
{ id: 8, usergroupname: 'Admins', product: 'God', seatslimits: '', expirationdate: '', lastpayment: '', nextpayment: '' }
],
}
}
},
I have tried to add an editing button to each row, but the Edit column is empty and I cannot see my buttons. Can anyone help me troubleshoot this issue? Thank you!