嗨,我正在使用sweetAlerts向我的用户呈现警报,在这种情况下,它是一个确认警报,效果很好,唯一的事情是完成后,我想刷新模块,不是整页。
现在我正在使用此。
或更新数组,因此表仅显示更新的信息:
<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>
基本上只需将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')
}
})