VueJS - How can i reload a datatable?

user_13873088 0
Viewed 792

I created a Vue component that loads some data fetched from my backend on a Vuetify datatable. This table has a Delete button for each row, and when the button is hit a post request that deletes that row from my db is triggered. I'm trying to make the table reload with the new data once the button is hit, but my code doesn't work.

Here is what i tried:

<template>
  <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)">
        Delete
      </v-btn>
    </template>
  </v-data-table>
</template>


<script>

import axios from 'axios';

export default {
 
  data() {
    return {

      search: '',

      headers: [
        { text: 'Asset', value: 'asset' },
        { text: 'Amount', value: 'amount' },
        { text: 'Delete', value: 'action' }
      ],

        balances: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('BACKEND-URL')
        .then(response => response.json())
        .then(data => {
          console.log(data)
          this.balances = data;
        })
    },

    sendRequest(rowData) {
      console.log(rowData)

      axios.post('BACKEND-URL', 
        { 
          order_id: rowData['orderid'] 
        }, 
      );

      this.fetchData()

    }
  }
}

</script>

In this case, when the button is hit i call fetchData() again, i expected it to show the new data on the table but it does nothing. How can i achieve this? Thanks in advance!

vue.js
3 Answers

You need to wait for promise to resolve before you can fetch data again

async sendRequest(rowData) {
      console.log(rowData)

      await axios.post('BACKEND-URL', 
        { 
          order_id: rowData['orderid'] 
        }, 
      );
      this.fetchData()
}
user_123788990

@Nilesh Patel is correct, you need to wait for this promise to be resolved before fetching your data again. If you don't want to use async/await, you can continue with the same pattern you were using in your fetchData() method.

Just as you waited for the data to be fetched to continue in the .then() in your fetchData method, you will need to run whatever you want in a .then() in your sendRequest method.

something like this: 

    sendRequest(rowData) {
      console.log(rowData)

      axios.post('BACKEND-URL', 
        { 
          order_id: rowData['orderid'] 
        }, 
      ).then(_=>{this.fetchData()}).


    }

Happy Coding!

user_104171810

use event bus for communicate events through components. declare event bus on your main js.

export const eventBus = new Vue();

then import it to your component and use $emit and $on.

import {eventBus} from '@/main.js';

created() {
  eventBus.$on('deleteEvent', () => {
     this.fetchData();
  });
}

in your delete method after call api use eventBus.$emit('deleteEvent')to call that event.

eg:

apiCall().then(() => {
  eventBus.$emit('deleteEvent');
}).catch();
user_93757120
Related