我正在为我的datatables使用Bootstrap Vue，并且在我的仪表板中得到了下表:
我可以通过点击垃圾箱图标成功删除物品.它使用Axios发送AJAX请求.但是，删除后，它仍然显示该项目，直到我手动刷新网页.我该如何解决这个问题？我不想在更新版本中加载另一个AJAX请求，我认为最好的解决方法就是从数据表中删除删除的条目行.
我try 给我的表一个ref标签，并使用this.$refs.table.refresh();调用刷新函数，但没有成功.
我的代码:
<template>
<div>
<b-modal ref="myModalRef" hide-footer title="Delete product">
<div class="container">
<div class="row">
<p>Are you sure you want to delete this item?</p>
<div class="col-md-6 pl-0">
<a href="#" v-on:click="deleteItem(selectedID)" class="btn btn-secondary btn-sm btn-block">Confirm</a>
</div>
<div class="col-md-6 pr-0">
<a href="#" v-on:click="$refs.myModalRef.hide()" class="btn btn-tertiary btn-sm btn-block">Cancel</a>
</div>
</div>
</div>
</b-modal>
<div id="main-wrapper" class="container">
<div class="row">
<div class="col-md-12">
<h4>Mijn producten</h4>
<p>Hier vind zich een overzicht van uw producten plaats.</p>
</div>
<div class="col-md-6 col-sm-6 col-12 mt-3 text-left">
<router-link class="btn btn-primary btn-sm" :to="{ name: 'create-product'}">Create new product</router-link>
</div>
<div class="col-md-6 col-sm-6 col-12 mt-3 text-right">
<b-form-input v-model="filter" class="table-search" placeholder="Type to Search" />
</div>
<div class="col-md-12">
<hr>
<b-table ref="table" show-empty striped hover responsive :items="posts" :fields="fields" :filter="filter" :current-page="currentPage" :per-page="perPage">
<template slot="title" slot-scope="data">
{{ data.item.title|truncate(30) }}
</template>
<template slot="description" slot-scope="data">
{{ data.item.description|truncate(50) }}
</template>
<template slot="public" slot-scope="data">
<i v-if="data.item.public === 0" title="Unpublished" class="fa fa-circle false" aria-hidden="true"></i>
<i v-else title="Published" class="fa fa-circle true" aria-hidden="true"></i>
</template>
<template slot="date" slot-scope="data">
{{ data.item.updated_at }}
</template>
<template slot="actions" slot-scope="data">
<a class="icon" href="#"><i class="fas fa-eye"></i></a>
<a v-on:click="editItem(data.item.id)" class="icon" href="#"><i class="fas fa-pencil-alt"></i></a>
<a href="#" v-on:click="getID(data.item.id)" class="icon"><i class="fas fa-trash"></i></a>
</template>
</b-table>
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0 pagination-sm" />
</div>
</div><!-- Row -->
</div><!-- Main Wrapper -->
</div>
<script>
export default {
data() {
return {
posts: [],
filter: null,
currentPage: 1,
perPage: 10,
totalRows: null,
selectedID: null,
fields: [
{
key: 'title',
sortable: true
},
{
key: 'description',
},
{
key: 'public',
sortable: true,
},
{
key: 'date',
label: 'Last updated',
sortable: true,
},
{
key: 'actions',
}
],
}
},
mounted() {
this.getResults();
},
methods: {
// Our method to GET results from a Laravel endpoint
getResults() {
axios.get('/api/products')
.then(response => {
this.posts = response.data;
this.totalRows = response.data.length;
});
},
getID: function(id){
this.selectedID = id;
this.$refs.myModalRef.show();
},
deleteItem: function (id) {
axios.delete('/api/products/' + id)
.then(response => {
this.$refs.myModalRef.hide();
this.$refs.table.refresh();
});
},
editItem: function (id){
this.$router.push({ path: 'products/' + id });
}
},
}
</script>