CODEWITHSUNDEEP
vue.jsvuetify.js
JayK23
JayK23

Reputation: 253

Vue - how can i add a button to each row in a Vuetify datatable?

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.

Upvotes: 2

Views: 1958

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28404

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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Related Questions