Menu
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!
206
js $set() method to set data object properties. Binding a class on an item and controlling it by the truthy value of a data property is a powerful feature of Vue.
If you have $v in your HTML codes, definitely, the code makes use of Vuelidate for form validations. $event is a special object used to store and retrieve events by Vue.js .
In Vue, v-for loops are something that every project will use at some point or another. They allow you to write for loops in your template code and create elements iteratively. v-for is most commonly used to render items in a list, but can also be used to iterate over an object's properties or even a set range.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
