UsersIndex component for use with vue-router - https://laravel-news.com/building-vue-spa-laravel-part-3

UsersIndex.vue

<template>
    <div class="users">
        <div v-if="error" class="error">
            <p>{{ error }}</p>
        </div>
        
        <ul v-if="users">
            <li v-for="{ id, name, email } in users">
                <strong>Name:</strong> {{ name }},
                <strong>Email:</strong> {{ email }}
            </li>
        </ul>

        <div class="pagination">
            <button :disabled="! prevPage" @click.prevent="goToPrev">Previous</button>
            {{ paginatonCount }}
            <button :disabled="! nextPage" @click.prevent="goToNext">Next</button>
        </div>
    </div>
</template>
<script>
import axios from 'axios';

const getUsers = (page, callback) => {
    const params = { page };

    axios
        .get('/api/users', { params })
        .then(response => {
            callback(null, response.data);
        }).catch(error => {
            callback(error, error.response.data);
        });
};

export default {
    data() {
        return {
            users: null,
            meta: null,
            links: {
                first: null,
                last: null,
                next: null,
                prev: null,
            },
            error: null,
        };
    },
    computed: {
        nextPage() {
            if (! this.meta || this.meta.current_page === this.meta.last_page) {
                return;
            }

            return this.meta.current_page + 1;
        },
        prevPage() {
            if (! this.meta || this.meta.current_page === 1) {
                return;
            }

            return this.meta.current_page - 1;
        },
        paginatonCount() {
            if (! this.meta) {
                return;
            }

            const { current_page, last_page } = this.meta;

            return `${current_page} of ${last_page}`;
        },
    },
    beforeRouteEnter (to, from, next) {
        getUsers(to.query.page, (err, data) => {
            next(vm => vm.setData(err, data));
        });
    },
    // when route changes and this component is already rendered,
    // the logic will be slightly different.
    beforeRouteUpdate (to, from, next) {
        this.users = this.links = this.meta = null
        getUsers(to.query.page, (err, data) => {
            this.setData(err, data);
            next();
        });
    },
    methods: {
        goToNext() {
            this.$router.push({
                query: {
                    page: this.nextPage,
                },
            });
        },
        goToPrev() {
            this.$router.push({
                name: 'users.index',
                query: {
                    page: this.prevPage,
                }
            });
        },
        setData(err, { data: users, links, meta }) {
            if (err) {
                this.error = err.toString();
            } else {
                this.users = users;
                this.links = links;
                this.meta = meta;
            }
        },
    }
}
</script>

Hi Paul, I've been following this tutorial, and have reached the end of part 3. Is there a part 4 yet ? It doesn't appear to be linked from the part 3 page. Many thanks !

need part 4

Does it work? By me the users is undefined. @paulredmond

Hi Paul, I've following for this tutorial. You are cool
We waiting for 4 part

Hi Paul, thanks for this great tutorial. Just finished part 3.
I think I found a typo. You use paginatonCount, seems like there is an "i" missing.
And I have one question. Did you leave the name property in the object for the this.router.push() in the goToNext() method intentionally? If yes, why?
Thanks again, for sharing your knowledge. Looking forward to part 4.

Thanks for the tutorial. I am learning a lot. One thing I found confusing going from part 2 to part 3 is that you originally had a method called fetchData() in part 2 and the first half of part 3. Halfway through part 3 it vanishes without a trace with no mention why, presumably replaced by const getUsers. Perhaps that disappearing method should be called getUsers() for consistency.