How to render data?

[phucvo0709]

I used many ways but could not render my data after loading, hope to get help!

[michalsnik]

Hi, I'm not sure I get your question, but you should use v-if/v-else directive and show content placeholders only while loading, otherwise display your items as you normally would.

[imlinus]

Sorry for old answer, but I'm hoping someone else might find it useful.

<div v-if="isLoading">
  <content-placeholders :rounded="true" :centered="true">
    <content-placeholders-text :lines="8" />
  </content-placeholders>
</div>

<div v-else>

</div>

[Criminal-sudo]

I was also writing a Skeleton screen and encountered a problem.
After reading your code, my confusion is even greater. The skeleton screen needs a loading boolean value to determine whether to render. There will be many pages in a project, and a loading boolean needs to be bound to each page. This is a repeated declaration of loading. boolean.
There is another situation: there will be many AJax requests on a page, and each request will be a separate module on the page, and a separate module is a skeletal screen, which will cause more repeated work of declaring laoding boolean Therefore, all AJax requests for the page are placed in Promise.all. After all requests are successful, the page is displayed normally, otherwise the skeleton screen is displayed.
This is my doubt now, I don't want to repeatedly declare the loading boolean, so I don't know if you have a better solution