asynctable.vue

<template>
    <g-field>
        <g-checkbox v-model="forceDataEmpty">Force data empty</g-checkbox>
    </g-field>
    <g-table :datas="forceDataEmpty ? []: userDatas4" :columns="userColumns4" type="info" @changePage="doFind"
        :total-data="100" :per-page="perPage" :isLoading="isLoading" show-numbering use-paging>
        <template slot="empty">
            <div class="has-text-centered">
                <p><i class="fas fa-box-open fa-7x"></i></p>
                <p class="title is-6">No more data to load</p>
            </div>
        </template>
    </g-table>
</template>

<script>
    export default {
        data() {
            return {
                isLoading: false,
                forceDataEmpty: false,
                perPage: 10,
                userDatas4: [],
                userColumns4: [{ name: 'First name' }, { name: 'Last name' },
                { name: 'Created date', position: 'centered' }, { name: 'Gender' }]
            };
        },
        methods: {
            doFind(page) {
                let url = `https://randomuser.me/api/?page=${page}&results=${this.perPage}`;

                this.isLoading = true;
                axios.get(url).then((response) => {
                    this.userDatas4 = (response.data.results || []).map(item => {
                        const { gender, name: { first: first_name, last: last_name }, dob: { date } } = item;

                        return { first_name, last_name, date, gender };
                    });

                    this.isLoading = false;
                }).catch(() => this.isLoading = false);
            }
        }
    };
</script>