dima9595
@dima9595
Junior PHP

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

Доброго времени суток! Знаю, что мало знаний в 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>
  • Вопрос задан
  • 993 просмотра
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Два варианта:
1. Добавить переменную-замок типа loading, активировать ее при запросе и снимать после получения ответа. В вотчер добавить проверку этой переменной.
2. Переделать пагинатор так, чтобы он генерил событие, когда вы на него нажимаете и отправлять соответствующий запрос, а не когда меняется значение переменной.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы