Vue - 如何在 Vuetify 数据表的每一行中添加一个按钮？

Question

I'm new to Vue and i'm dealing with datatables. I'm using Vuetify's datatables to create a component that, on page load, sends a request to my backend, receives some data and shows that data on a datatable.

This is my current code:

<template>
  <v-data-table
    :headers="headers"
    :items="balances"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>


export default {
 
  data() {
    return {

      search: '',

      headers: [
        { text: 'Asset', value: 'symbol' },
        { text: 'Amount', value: 'amount' },
      ],

        balances: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('MYURL')
        .then(response => response.json())
        .then(data => {
          this.balances = data;
        })
    }
  }
}

</script>

The problem i'm facing now is adding a button to each row in the table, and this button should send a request to my backend with that row's data, so i need to add a button that, when clicked, can fetch the row's data. Is there any way to do that? I tried looking into Vuetify's docs but i didn't found much about a task like this one.

Answer 1

You can add a new column, set value to action for example, and add a slot in the table as follows:

 new Vue({ el:"#app", vuetify: new Vuetify(), data() { return { search: '', headers: [ { text: 'Asset', value: 'symbol' }, { text: 'Amount', value: 'amount' }, { text: 'Send', value: 'action' } ], balances: [ { symbol: "$", amount: 100 }, { symbol: "$", amount: 200 }, ], } }, methods: { sendRequest(rowData) { console.log(rowData) } } });

 <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <v-app id="app"> <v-data-table:headers="headers":items="balances":items-per-page="5" class="elevation-1" > <template v-slot:item.action="{ item }"> <v-btn @click="sendRequest(item)"> Send </v-btn> </template> </v-data-table> </v-app>