Vue-tables-2: Question: How to delete row from table?

[edamov]

Hi,
I'm trying to remove row from table.
But I don't know how to do it. Can you please provide an example?
And also I don't know how to refresh table with server request?

Here is my code:

<template>
    <div>
        <v-server-table :url="routeItemsList" :columns="columns" :options="options" @loaded="onLoaded">
            <template slot="actions" scope="props">
                <a @click="remove(props.row)">Remove</a>
            </template>
        </v-server-table>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {ServerTable} from 'vue-tables-2';
    Vue.use(ServerTable);

    export default {
        props: {
            routeItemsList: {
                type: String,
                required: true
            },
        },
        data: function () {
            return {
                allChecked: false,
                countChecked: 0,
                response: [],
                columns: ['checkbox', 'name', 'actions'],
                options: {
                    saveState: true,
                    filterable: false,
                    sortable: [],
                    perPageValues: [],
                    perPage: 50,
                    pagination: {chunk: 50},
                    texts: {
                        count: ''
                    },
                    requestAdapter: function (data) {
                        data.offset = data.page * data.limit - data.limit;
                        return data;
                    }
                }
            };
        },
        methods: {
            removeGroup: function (row) {
                // Here I send ajax request and remove item on server

                // 1. How to remove row from vue-table?
                // 2. How to refresh vue-table with request to server?
            },   
        }
    }
</script>

[matfish2]

Deleting a row on the server component requires refreshing the table using the (documented) refresh method:

this.$refs.myTable.refresh() // replace "myTable" with your own ref

[tiagomatosweb]

I am using

this.$refs.myTable.data.splice(rowIndex, 1);

to delete a row after deleting from API. Therefore, I do not need to refresh the table o lose the current state.