Clever Geek Handbook

How to constrain my iterations in VueJs

I have this piece of code that iterates over an object posts

and populates a 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>

I currently have about 50 posts

coming from a third party API call on an object posts

.

How can I limit the iterations to only 10 so that all 50 posts are not displayed and only 10 posts are rendered? What is the most vuejs

way to solve it?

PS : I just started with vuejs

!

+3


source to share


1 answer


You can keep track of the index of each element in the directive v-for

and then use v-if

to not display the previously defined index:



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


source






More articles:


All Articles