javascript - VueJS updated() lifecycle hook causes an infinite loop - Stack Overflow

admin管理员组

文章数量:1426793

I have a simple VueJS app. In one of my ponents, I'm trying to retrieve a list of articles. If the user is logged in, I make a specific request. Otherwise, I make another one. Here's my 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 thing is, the user prop es from the parent ponent, and it takes some time before the app retrieves it. Once the user is retrieved, it updates the ponent, then I'm able to make the request to the backend with getFollowersPosts() since I now have user.

However, once I get the request result, I need to update the posts array. This causes the ponent to update again, and start all over again. Now what I get is the ponent updating indefinitely, and even worse, the MySQL databases ends up closing the connection.

Is there a way to avoid that ? I just want to retrieve the list of articles, and that's it !

Thanks.

tl;dr I'm trying to make a request that updates the ponent's data after a prop updates, but it causes the ponent to update infinitely. If I use another lifecycle hook like created(), I won't be able to retrieve the user prop.

I have a simple VueJS app. In one of my ponents, I'm trying to retrieve a list of articles. If the user is logged in, I make a specific request. Otherwise, I make another one. Here's my 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 thing is, the user prop es from the parent ponent, and it takes some time before the app retrieves it. Once the user is retrieved, it updates the ponent, then I'm able to make the request to the backend with getFollowersPosts() since I now have user.

However, once I get the request result, I need to update the posts array. This causes the ponent to update again, and start all over again. Now what I get is the ponent updating indefinitely, and even worse, the MySQL databases ends up closing the connection.

Is there a way to avoid that ? I just want to retrieve the list of articles, and that's it !

Thanks.

tl;dr I'm trying to make a request that updates the ponent's data after a prop updates, but it causes the ponent to update infinitely. If I use another lifecycle hook like created(), I won't be able to retrieve the user prop.

• javascript
• vue.js
• hook

Share Improve this question Follow asked Nov 24, 2019 at 15:53 tomfltomfl 70711 gold badge1414 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You should rather watch for change on the user object and make the getFollowersPosts() request there.

watch: {
    user: function (val) {
      if (val) {
        this.posts = await getFollowersPosts(1);
      }
    }
}

You can read more about watchers here: https://it.vuejs/v2/guide/puted.html

Wow, I've been struggling for hours to find an answer, and right after posting my question I ended up finding the solution.

So I got it to work using a watcher. I guess the watcher is called only once for each prop that's updated. Here's my code now :

<script>
  import { getFollowersPosts } from './../services/post';

  export default {
    name: 'Home',
    props: {
      user: Object
    },
    data() {
      return {
        posts: []
      }
    },
    watch: {
      user: async function() {
        if (this.user) {
          this.posts = await getFollowersPosts(1);
        }
      }
    }
  }
</script>

本文标签： javascriptVueJS updated() lifecycle hook causes an infinite loopStack Overflow