bootstrap vue get row data when click on cell in custom rendering - vue.js

Question

I have a table that have two custom fields index and a trash icon in separate column for remove that row. I want to get row's in click on just trash icon (on cell) for get index of row and then remove it from items in data object but my problem is I don't know how to get row data in onclick event in custom rendering. How can I do that??
<b-table :fields="fields" :items="items">
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
</template>
<template v-slot:cell(remove)="data">
<i class="fas fa-trash"></i>
</template>
</b-table>
this is my data:
fields: [
{ key: 'index', label: 'index' },
{ key: 'cardNumber',label: 'card number'},
{ key: 'status',label: 'status'},
{ key: 'remove',label: 'remove'}
],
items: [
{ cardNumber: '123456', status: 'accepted' ,_cellVariants: { status: 'accepted-card-number'},_showDetails: true},
{ cardNumber: '123456', status: 'pending' ,_cellVariants: { status: 'pending-card-number'},_showDetails: true},
{ cardNumber: '123456', status: 'unaccepted' ,_cellVariants: { status: 'unAccepted-card-number'},_showDetails: true},
],

Answer 1

This should be what your looking for https://jsfiddle.net/q95otzbg/. You just need a click function on your trash icon passing it the index of the row.
<div id="app">
<div>
<b-table :fields="fields" :items="items">
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
</template>
<template v-slot:cell(remove)="data">
<i class="fas fa-trash" #click=removeRow(data.index)></i>
</template>
</b-table>
</div>
</div>
methods: {
removeRow(index) {
this.items.splice(index,1)
}
}