Эффект мерцания при обновлении - Vue Component - PullRequest
Новая
       8

Эффект мерцания при обновлении - Vue Component

0 голосов
/ 24 мая 2018

Я создал компонент для поиска сообщений из API по запросу из URL, но если я изменю запрос, я получаю странный мерцающий эффект.Количество щелчков увеличивается на единицу после каждого изменения.Как это решить?Vue Devtools показывает, что loadPosts () вызывается: 1 раз, 2 раза, 3 раза и так далее.Где ошибка?Перезагрузка компонента дает тот же эффект. 

<template>
    <v-app>
        <main-header/>
        <v-layout class="mx-auto default--container">
            <v-flex xs12 ma-2>
                <h2 class="display-2 text-xs-center main-page--header">
                    <span class="text__red">W</span>yniki wyszukiwania dla:
                    <span class="text__red">{{this.$route.query.s}}</span>
                </h2>
                <article-list-sample v-for="i in articles.length" :key="`${i}`" />
            </v-flex>
        </v-layout>
        <main-footer />
    </v-app>
</template>

<script>
    import MainHeader from './MainHeader';
    import MainFooter from './MainFooter';
    import ArticleListSample from './ArticleListSample';
    import API from '../api';
    export default {
        components: {
            ArticleListSample,
            MainFooter,
            MainHeader
        },
        name: 'search',
        data: () => ({
            articles: []
        }),
        methods: {
            loadPosts() {
                API.get(`posts?search=${this.$route.query.s}`)
                    .then(response => this.articles = response['data'])
            }
        },
        mounted() {
            this.loadPosts();
        },
        updated() {
            this.loadPosts();
        }
    };
</script>

<style scoped>

</style>

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Чтобы добавить это, был создан бесконечный цикл, потому что обновление запускалось всякий раз, когда вы меняли this.articles, который затем запускал другой асинхронный вызов.

0 голосов
/ 24 мая 2018

Я решил это.Просто нужно добавить наблюдателя вместо метода updated (). 

watch: {
            '$route' () {
                this.loadPosts();
            }
        },
...