Data is not fully rendered in mounted hook

[tonqa]

Discussed in https://github.com/nuxt/nuxt.js/discussions/10662

^{Originally posted by tonqa August 20, 2022} My problem is that the v-if is not evaluated at mounted hook during page revisit. I have the following page component:

<template>
  <section class="site-content">
    <article v-if="post && !$fetchState.pending" class="post">
      <div class="text-md" v-html="toMarkdown(post.content)" />
    </article>
  </section>
</template>

export default {
  name: "BlogPost",
  async asyncData() {
    console.log("calling asyncdata");  // is called first
    let post = await fetch(url).then((res) => return res.json());
    return { post };
  },
  mounted() {
    this.$nextTick(() => {
      console.log(document.getElementsByTagName("article"));  // outputs the article tag
      console.log(document.querySelectorAll(".text-md"));  // outputs an empty nodelist !!!
      console.log("Post ", this.post);  // outputs a successfully fetched post
      console.log("FetchState ", this.$fetchState);  // outputs state with pending = false
    });
  }
}

During initial page visit everything goes right and .text-md exists, but when I revisit the page .text-md is not rendered yet though the post is already loaded and the fetch state is pending = false. I think the v-if is not yet evaluated during that stage. But I could not find out what's the actual problem here during page revisit and what causes the difference at page revisit. I have no idea. Please help

P.S.: I have tried to set a timer, and after 1 second the .text-md exists. However, this is not a sweet solution.

P.P.S.: I have tried further. If I leave out the v-if $fetchState.pending and just write v-if="post" it somehow works. This seems to be a bug in rendering with v-if and $fetchState.pending while mounting.

[silvesterwali]

hi @tonqa . asycnData work different way with fetch according docs. So if you want catch the $fetchState.pending during data load process from API please use fetch hooks.