[Vuejs]-Refresh data table event after file upload

by

0👍

Changing the URL in order to trigger re-fetching of the data:

<template>
<data-table-user-files
                  :fetch-url="datatTableUrl5"
                  :columns="['id', 'description', 'file_category','user_id' ]"
                  :headers="{'id': 'ID','description': 'Opis','file_category': 'Kategoria','user_id': 'Twórca'}"
                  :routeName="routeAddName5"
/>

<script>
export default
{
  data()
  {
    return {
      triggerRefetch: 0,
    };
  },
  computed:
  {
    datatTableUrl5()
    {
      return `https://my.api.example.com/api/endpoint?t=${triggerRefetch}`;
    },
  },
  methods:
  {
    filesSuccessfullyUploaded()
    {
      this.triggerRefetch++;
    },
  }
}
</script>

import Axios from 'axios';

export default
{
  props:
  {
    fetchUrl:
    {
      type: String,
      required: true
    },
  },
  data()
  {
    files: [],
  },
  watch:
  {
    fetchUrl:
    {
      immediate: true,
      handler()
      {
        this.getFilesList();
      }
    }
  },
  methods:
  {
    getFilesList()
    {
      Axios.get(this.fetchUrl).then(response => this.files = response.data || []);
    }
  }
}

Leave a comment