Refresh Boostrap-Vue table after deleting a row

Question

I'm using Bootstrap-Vue for my datatables and got the following table within my dashboard:

I can succesfully delete items by clicking on the trash icon. It sends an AJAX request using Axios. However, after deletion it still displays the item until I manually refresh the web page. How do I solve this? I don't want to make another AJAX request to load in the updated version, I think the best way to solve it is just remove the deleted item row from the datatable.

I tried giving my table a ref tag and call a refresh function using this.$refs.table.refresh(); but with no success.

My code:

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

Answer 1

The deleteItem method should be like this:

        deleteItem(id) {
            axios.delete('/api/products/' + id)
                .then(response => {
                   const index = this.posts.findIndex(post => post.id === id) // find the post index 
                   if (~index) // if the post exists in array
                     this.posts.splice(index, 1) //delete the post
                });

        },

So basically you don't need any refresh. If you remove the item for posts array Vue will automatically handle this for you and your table will be "refreshed"