Vue JS Sweetalert确认刷新模块

Question

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

目前，我正在使用this。$ router.go（0），但正在刷新整个页面。

或更新阵列，以便该表仅显示更新的信息：

再次启用删除操作，无需刷新整个页面即可删除已删除的项目

HTML

<v-data-table :headers="headers2"
                  :items="records2"
                  :pagination.sync="pagination2"
                  :search="search2">
      <template slot="items" slot-scope="records">
        <td class="text-xl-left">{{ records.item.sid }}</td>
        <td class="text-xl-left">{{ records.item.firstName }} {{ records.item.lastName }}</td>
        <td class="text-xs-left"><a :href="'mailto:'+ records.item.email">{{ records.item.email }}</a></td>
        <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: [
          { text: 'SID', value: 'sid', sortable: true },
          { text: 'Full Name', value: 'FullName', sortable: true },
          { text: 'Email', value: 'Email', sortable: true },
          { text: 'Phone', value: 'PhoneNumber', sortable: true },
          { text: 'Date', value: 'Date', sortable: true},
          { text: 'Quarter', value: 'Quarter', sortable: true },
          { text: 'Profile', value: 'name', sortable: false }          
        ],
        headers2: [
          { text: 'SID', value: 'sid', sortable: true },
          { text: 'Full Name', value: 'FullName', sortable: true },
          { text: 'Email', value: 'Email', sortable: true },
          { text: 'Phone', value: 'PhoneNumber', sortable: true },
          { text: 'Date', value: 'Date', sortable: true },
          { text: 'Profile', value: 'name', sortable: false },
          { text: 'Delete', value: 'delete', sortable: false }
        ]

      };
    },   
    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) {
        // 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) => {
          if (result.value) {
            this.$http.post('/api/deleteAddddddddpplication/',
              {
                ID: id
              })
            this.$swal.fire(
              'Deleted!',
              'Your file has been deleted.',
              'success')                   
          }
        })
      }

    }
 }
</script>

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