I am working on a VueJS application where I need to fetch a list of articles in one of my components. The logic is such that if the user is logged in, a specific request is made, and if not, another request is executed. Below is the snippet of code:
<script>
import { getFollowersPosts } from './../services/post';
export default {
name: 'Home',
props: {
user: Object
},
data() {
return {
posts: []
}
},
async updated() {
if (this.user) {
this.posts = await getFollowersPosts(1);
}
}
}
</script>
The issue arises because the user prop is coming from the parent component and there is a delay before it is retrieved by the app. Once the user prop is available, the component updates triggering the backend request using getFollowersPosts(). However, when the request result is received, it updates the posts array causing the component to update again and creating an endless loop. This continuous updating also leads to the MySQL database connection closing unexpectedly.
Is there a way to prevent this infinite loop? My intention is simply to retrieve the list of articles without any issues.
Thank you.
tl;dr I am facing challenges with making a request that updates the component's data after a prop changes, leading to an infinite update loop. Using another lifecycle hook like created() would not allow me to access the user prop.