Двойной axios запрос в VueJS, как исправить?

Question

[Дмитрий Кузнецов]

Доброго времени суток! Знаю, что мало знаний в Vue.JS/JS, но толкового результата в поиске не нашёл.

Есть следующий код, который получает из Laravel 5 приложения данные с пагинацией. Благодаря этому, при загрузке страницы, я формирую данные и пагинацию. Но дело в том, что запрос на получение данных делается 2 раза - "create" и "watch". Буду очень благодарен за лучшую реализацию данной технике.

<template>
    <v-container fluid grid-list-md>
        <v-layout row wrap>
            <v-flex xl3 lg4 md4 sm6 xs12 v-for="(game, i) in games.data" :key="game.id_games">
                ...
            </v-flex>
        </v-layout>

        <v-pagination :length="games.last_page" v-model="games.current_page" :total-visible="games.total"></v-pagination>
    </v-container>
</template>

<script>
    export default {
        name: 'news',
        metaInfo: {
            title: 'Игры'
        },

        data() {
            return {
                games: {}
            }
        },

        created() {
            this.getGames()
        },

        watch: {
            'games.current_page': function(){
                this.getGames(this.games.current_page)
            }
        },

        methods: {
            getGames(page) {
                var page = this.games.current_page || 1

                this.axios.get('/api/v1/games?page=' + page)
                    .then(response => {
                        this.games = response.data

                        console.log(response.data)
                    })
                    .catch(err => console.log(err))
            }
        }
    }
</script>

Answer 1

[Evgeny Kulakov]

Два варианта:
1. Добавить переменную-замок типа loading, активировать ее при запросе и снимать после получения ответа. В вотчер добавить проверку этой переменной.
2. Переделать пагинатор так, чтобы он генерил событие, когда вы на него нажимаете и отправлять соответствующий запрос, а не когда меняется значение переменной.

Comments

[Дмитрий Кузнецов]

Дело в том, что я использую https://next.vuetifyjs.com/components/paginations#... и переписать, как вы описывали во 2-ом пункте, это для меня не реально.
Не совсем понял про первый вариант. Так то у меня первый запрос на получение данных с пагинацией и отрисовке пагинации работает нормально, но из-за вотчера у меня делается сразу же второй запрос. Может быть как-нибудь по-другому можно это написать?

[Evgeny Kulakov]

Дмитрий Кузнецов, как-то так, но выглядит костылем)

data() {
            return {
                games: {},
                firstLoad: true
            }
        },

        created() {
            this.getGames()
        },

        watch: {
            'games.current_page': function(){
                if(!this.firstLoad) this.getGames(this.games.current_page)
            }
        },

        methods: {
            getGames(page) {
                var page = this.games.current_page || 1

                this.axios.get('/api/v1/games?page=' + page)
                    .then(response => {
                        this.games = response.data
                        this.$nextTick(()=> {this.firstLoad = false})
                        console.log(response.data)
                    })
                    .catch(err => console.log(err))
            }
        }