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

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},
      ],

How about adding a button with an @click event handler on your second template. On the @click event, pass the event name and the index as necessary (i.e. @click=yourEvent(data.index) — Angelo

Cody Fortenberry Cody Fortenberry · Accepted Answer · 2019-11-15T17:00:01

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

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

1 Answers