Vue JS Sweetalert Confirm refresh module

Question

Hi guys I'm using sweetalerts to present alerts to my users, in this case, is a confirmation alert and it's working fine, the only thing is after complete I would like to refresh the module, not the whole page.

As right now I'm using this.$router.go(0) but is refreshing the whole page.

Or Update the Array so the table just shows the updated information:

        <td class="text-xs-left">{{ records.item.phone }}</td>
        <td class="text-xs-left">{{ records.item.date }}</td>
        <td class="justify-center layout px-0">
          <v-icon small
                  class="mr-4"
                  @click="editItem(records.item.email)">
            visibility
          </v-icon>
        </td>
        <td>              
          <v-icon small
                  v-on:click="showAlert(records.item.id)">
            delete
          </v-icon>
        </td>
      </template>
      <v-alert slot="no-results" :value="true" color="error" icon="warning">
        Your search for "{{ search2 }}" found no results.
      </v-alert>
    </v-data-table>

Script

    <script>
  import Vue from 'vue'
  import api from '../store/api.js'

export default {
    data() {
      return {
        pagination: {
          descending: true,
          rowsPerPage: 10
        },
        pagination2: {
          rowsPerPage: 10
        },
        search: '',
        search2: '',
        records: [],
        records2: [],
        total: [],
        confirm: false,
        headers: [


      };
    },   
    created() {
      api.GetAllInquiries().then((response) => {
        this.records = response.data;
      });
      api.GetAllApplications().then((response) => {
        this.records2 = response.data;
      });
      api.GetTotalInquiries().then((response) => {
        this.total = response.data;
      });
    },
    methods: {
      editItem(email) {
        this.$router.push({ name: 'Profile', params: { email: email } });
      },
      showAlert(id) {

                ID: id
              })
            this.$swal.fire(
              'Deleted!',
              'Your file has been deleted.',
              'success')                   
          }
        })
      }

    }
 }
</script>

Answer 1

Basically just add the api call to the response portion of your showAlert function. I'm assuming that they are responsible for populating your tables.

showAlert(id) {
    // Use sweetalert2
    this.$swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      api.GetAllInquiries().then((response) => {
        this.records = response.data;
      });
      api.GetAllApplications().then((response) => {
        this.records2 = response.data;
      });
      api.GetTotalInquiries().then((response) => {
        this.total = response.data;
      });
      if (result.value) {
        this.$http.post('/api/deleteAddddddddpplication/',
          {
            ID: id
          })
        this.$swal.fire(
          'Deleted!',
          'Your file has been deleted.',
          'success')                   
      }
    })