행 삭제 후 Boostrap-Vue 테이블 새로 고침

행 삭제 후 Boostrap-Vue 테이블 새로 고침

데이터 테이블에 Bootstrap-Vue를 사용하고 있으며 대시보드에서 다음 표를 얻었음:

휴지통 아이콘을 클릭하여 항목을 성공적으로 삭제할 수 있다.Axios를 사용하여 AJAX 요청을 전송한다.그러나 삭제 후에도 웹 페이지를 수동으로 새로 고칠 때까지 항목이 표시된다.이 문제를 어떻게 해결하지?업데이트된 버전에 로딩하기 위해 AJAX 요청을 다시 하고 싶지 않아, 데이터 테이블에서 삭제된 항목 행만 제거하는 것이 가장 좋은 방법이라고 생각해.

테이블에서 ref tag를 주고 refresh 기능을 불러보았다.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>

deleteItem 방법은 다음과 같아야 한다.

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

        },

그러니 기본적으로 당신은 어떤 기분전환도 필요하지 않다.항목을 제거할 경우posts어레이 Vue가 자동으로 처리하고 테이블이 "새로 고쳐짐"

삭제 후 지정된 ID로 해당 게시물을 제거하십시오.

     axios.delete('/api/products/' + id)
                .then(response => {
                 this.posts= this.posts.filter(post=>post.id!=id)

                });
    

 axios.delete('/api/products/' + id)
                .then(response => {
                this.getResults();

                });

참조URL: https://stackoverflow.com/questions/53042690/refresh-boostrap-vue-table-after-deleting-a-row