DEV Community

sium_hossain
sium_hossain

Posted on

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.