1

Simple problem, i have a members list where i iterate through it with a v-for.

How can i limit the results and only show the first 2 ?

members = [ {id : 1, name: 'Franck'}, {id : 2, name: 'Sophie'}, {id : 3, name: 'Bob'}]
<div v-for="member in members" :key="member.id">
    <p>{{ name }}</p>        
</div>

Just want to know if it's feasible from template ? Otherwise i know that i can use a computed properties that filtered it and i just have to loop through the results of my filtered array

foufrix
  • 1,324
  • 4
  • 21
  • 45
  • As for now there is no way to break a loop in Vue. Better watch this topic: https://stackoverflow.com/questions/48101822/how-to-break-a-v-for-loop-in-vuejs – psudo Jul 01 '20 at 11:20

2 Answers2

1

You can use slice() in the template if you prefer to not use a computed property. I would though choose to have a computed property, if for nothing else, I like to handle all logic in script instead of template. But as said, you can use slice:

v-for="(member, index) in members.slice(0, 2)"

A forked fiddle that was provided by @Raffobaffo in a comment.

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Exactly. But then you find some user like down here that downvote you because they like to fill their pages with empty divs. – Raffobaffo Jul 01 '20 at 12:57
  • @Raffobaffo Oh, and right, I see now that it was a fiddle provided by you, not OP. corrected that in my answer. But now I was thinking I'll delete my answer, didn't see that you had used slice in computed property. That is the way I would go, for sure. – AT82 Jul 01 '20 at 13:08
  • Great. Thanks for giving me credit too! – Raffobaffo Jul 01 '20 at 13:08
  • @Raffobaffo not to mention the users that want to re-iterate over the entire list every re-render :P – procoib Jul 01 '20 at 13:50
  • this is the answer to my question but effectively for cleaner readability, i'll use computed property as i stated before. It was more to see if there was something i missed on the documentation. Thanks to @Raffobaffo and AJT82 for the time they took to debate on this one – foufrix Jul 02 '20 at 12:19
  • Great, so if you do not accept my answer at least upvote please for the time spent :) – Raffobaffo Jul 02 '20 at 12:20
  • Thanks! this was exactly what i was looking for – Fatih Akgun Mar 03 '21 at 09:09
0

After some discussions here, lets divide the answer in two:

A fast, not super correct way but still referred inside vue docs Use a v-if and set and index in the v-for.

<div v-for="(member, index) in members" :key="member.id" v-if="index < 3">
    <p>{{ name }}</p>        
</div>

else, the most correct way is to create a computed property returning just the elements you need:

  <template>
       <div v-for="member in justTwoElements" :key="member.id">
         <p>{{ name }}</p>        
      </div>
  <template>

  ....
  computed: {
       justTwoElements: function(){
           return this.members.slice(0,2);
       }
   }

This latest solution is more indicated when your data entry is huge, the benefits of using it instead of the first solution are well explained here.

I hope this helps to give you the correct path to follow

tony19
  • 125,647
  • 18
  • 229
  • 307
Raffobaffo
  • 2,806
  • 9
  • 22