Question

我已创建了通过URL查询从API搜索帖子的组件，但如果我更改了查询，则会收到奇怪的闪烁效果。每次更改后，电影的数量都会增加一倍。怎么解决？ Vue Devtools显示loadPosts（）被调用：1次，2次，3次等等。错误在哪里？重新加载组件会产生相同的效果。

＆＃13;

<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>

＆＃13;

Answer 1

我解决了。只需要添加watcher而不是updated（）方法。

＆＃13;

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

＆＃13;

Answer 2

除此之外，还创建了无限循环，因为每当您更改this.articles时都会触发更新，然后启动另一个异步调用。

更新时的闪烁效果 - Vue组件

2 个答案: