DEV Community

sium_hossain
sium_hossain

Posted on

1 1

How can I limit an object size before it is looped in vue/nuxt?

Sometimes for design requirements we have to minimize response object size or we can say response data. More clearly - Suppose, from API we receive 40 objects as response but I need only four of them. That's the one of reason GraphQL invented. GraphQL provide only those amount of data which is needed. Whatever we can slice our total response into our desire amount before printing by simply put array slice functionality in v-for loop-

v-for="obj in obj.slice([from:int value],[to:int value])

v-for="(i,index) in i.slice(0,4)" :key="index"
Enter fullscreen mode Exit fullscreen mode

Thank you 💓

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT •

The solution for that is to use pagination and fetch the data in blocks (like 10 or 20 elements) on each call, that way you don't over-fetch.
If you slice on your client, you will add more load on your client's browser and you will spend time fetching data you don't even need.

PS: don't use index for your :key, it's counter-productive.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more