Vuetify insert action button in data-table and get row data

Question

Environment:

vue@^2.6.10:
vuetify@^2.1.0

I want to use v-data-table to show search results and add evaluate button in each row in the v-data-table.

Unfortunately I have two issues:

1. Evaluate buttons are not shown
2. I don't know how to get row data of pushed button

What do I need to change?

Template

    <v-data-table
            :headers="headers"
            :items="search_result"
    >
        <template slot="items" slot-scope="row">
            <td>{{row.item.no}}</td>
            <td>{{row.item.result}}</td>
            <td>
                <v-btn class="mx-2" fab dark small color="pink">
                    <v-icon dark>mdi-heart</v-icon>
                </v-btn>
            </td>
        </template>
    </v-data-table>

Script

data () {
            return {
                headers: [
                    { text: 'no', value: 'no' },
                    { text: 'result', value: 'result' },
                    { text: 'good', value: 'good'},
                ],
                // in real case initial search_result = [], and methods: search function inject below data
                search_result: [{no: 0, result: 'aaa'}, {no:2, result: 'bbb'],
            }
        },

Answer 1

1. slot name used to "replace the default rendering of a row" is item, not items
2. Add wrapping <tr> into slot template
3. Just add @click="onButtonClick(row.item) to v-btn and create method onButtonClick

    <v-data-table :headers="headers" :items="search_result">
      <template v-slot:item="row">
          <tr>
            <td>{{row.item.no}}</td>
            <td>{{row.item.result}}</td>
            <td>
                <v-btn class="mx-2" fab dark small color="pink" @click="onButtonClick(row.item)">
                    <v-icon dark>mdi-heart</v-icon>
                </v-btn>
            </td>
          </tr>
      </template>
    </v-data-table>

methods: {
    onButtonClick(item) {
      console.log('click on ' + item.no)
    }
  }

Note..

...solution above is replacing default row rendering with your own so expect some of the v-data-table features to not work (didn't try but I expect row selection, grouping, in place editing etc. will be broken). If that's problem for you, here is alternative solution:

1. Add one more column to your headers definition: { text: "", value: "controls", sortable: false }
2. Do not override item slot (row rendering). Override item.controls slot instead. Notice "controls" is the same as in column definition - we are overriding just rendering of "controls" column
3. Everything else is same

    <v-data-table :headers="headers" :items="search_result">
      <template v-slot:item.controls="props">
        <v-btn class="mx-2" fab dark small color="pink" @click="onButtonClick(props.item)">
          <v-icon dark>mdi-heart</v-icon>
        </v-btn>
      </template>
    </v-data-table>