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

问题

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

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

来源：https://stackoverflow.com/questions/59081299/vuetify-insert-action-button-in-data-table-and-get-row-data