Vue JS Sweetalert 确认刷新模块答案

【问题标题】：Vue JS Sweetalert Confirm refresh moduleVue JS Sweetalert 确认刷新模块
【发布时间】：2019-02-15 18:41:30
【问题描述】：

大家好，我正在使用 sweetalerts 向我的用户显示警报，在这种情况下，是一个确认警报，它工作正常，唯一的事情是完成后我想刷新模块，而不是整个页面。

现在我正在使用 this.$router.go(0) 但正在刷新整个页面。

或者更新数组，让表格只显示更新的信息：

        <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>
  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>

【问题讨论】：

标签： vue.js sweetalert2

【解决方案1】：

基本上只需将 api 调用添加到 showAlert 函数的响应部分。我假设他们负责填充您的表格。

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')                   
      }
    })

【讨论】：