Refresh data table event after file upload

Question

I am beginner web developer. I make my first project in Vue.

I make form with files upload in vue 2 and laravel.

My full code: View: https://pastebin.com/QFrBfF74 Data table user file: https://pastebin.com/sGQH71XZ

This code work fine, nut I have small problem with reload ata-table-user-files after files upload.

Modal where I have file uploader:

<div>
            <CModal
              title="Dodaj plik"
              color="info"
              :show.sync="filesModal"
              size="xl"
              :closeOnBackdrop=true
              :centered="true"
            >
              <div class="container">
                <div class="row justify-content-center">
                  <div class="col-md-8">
                    <div class="card">
                      <div class="card-header">Dodaj plik w formacie: jpg, jpeg, png, bmp, pdf, xml, csv, doc, docx,
                        txt, rtf
                      </div>
                      <div class="card-body">
                        <CRow>
                          <CCol md="12">
                            <CSelect id="dispatcher_id"
                                     label="Wybierz kategorię pliku"
                                     v-model.trim="$v.form.file_category.$model"
                                     :options="filesCategory"
                            >
                            </CSelect>
                          </CCol>
                          <CCol md="12">
                            <CTextarea
                              label="Opis pliku"
                              placeholder="Wpisz opis dodawanego pliku"
                              rows="9"
                              v-model.trim="$v.form.file_content.$model"
                            />
                          </CCol>
                        </CRow>
                        <form enctype="multipart/form-data" @submit="formFileSubmit">
                          <input type="file" class="form-control" v-on:change="onFileChange"  name="file_name" ref="inputFile">
                          <button class="btn btn-primary btn-block">Dodaj plik</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CModal>
          </div>

Refresh action I need after "Sukces Plik dodany poprawnie!" I need reload files list:

<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"
                ></data-table-user-files>

I try do this in function:

getFilesList()
    {
      let self = this;
      axios.get(this.$apiAdress + '/api/tasks-file-list?token=' + localStorage.getItem("api_token") + '&taskId=' + self.form.taskId)
        .then(function (response) {
          self.addedFiles = [];
          self.addedFiles = response.data
        }).catch(function (error) {
        console.log(error);
        self.$router.push({path: '/login'});
      });
    },

But it's not working :(

How can I repair it? Please help me.

Answer 1

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 || []);
    }
  }
}