I have developed a component that searches for posts from an API based on the query from the URL. However, whenever I change the query, I encounter a strange flickering effect. The number of flicks increases by one with each change. How can I resolve this issue? Vue Devtools indicates that loadPosts() is being called multiple times: 1 time, 2 times, 3 times, and so forth. Where could the mistake be? Even reloading the component does not eliminate the issue.
<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>