CODEWITHSUNDEEP
javascriptvuejs2
Abdullah Mohammad Motiullah
Abdullah Mohammad Motiullah

Reputation: 12582

How to limit my iterations in VueJs

I have this piece of code which is looping through the posts object and populating the table. 

<table>
    <tr v-for="post in posts" :key="post.id">
        <td>{{post.id}}</td>
        <td>{{post.title}}</td>
        <td>{{post.body}}</td>
    </tr>
</table>

Currently I have around 50 posts coming from a third party API call in the posts object.

How can I limit the iterations to only 10 so that all the 50 posts don't show up and only 10 posts do? What is the most vuejs way of solving it?

PS: I have just started with vuejs!

Upvotes: 6

Views: 2992

Answers (1)

thanksd
thanksd

Reputation: 55664

You can track the index of each element in the v-for directive, and then use a v-if to not render past a certain index:

<tr v-for="post, index in posts" :key="post.id" v-if="index < 10">

Upvotes: 2

Related Questions