How to not show all items in v-for

Question

I have a list like this:

data:{
        slides:[
            { slideImg: "images/necklace.webp"},
            { slideImg: "images/necklace2.webp"},
            { slideImg: "images/pants.webp"},
            { slideImg: "images/pants2.jpeg"},    
        ],    
    }

I try with v-for:

<div class="slide" v-for="slide in slides">
   <img :src="slide.slideImg">       
</div>

V-for makes all items show. But i have an option list, example: when I click option "1 per page" then 1 slide will be shown, "2 per page" then 2 slides will be shown, then 3, 4, 5... Can someone show me how to do that?

Answer 1

Best practice is to make a computed value which filters the items you want to show.

computed: {
  itemsToShow() {
    return this.items.slice(0, this.itemsToShowCount);
  }
}

then use v-for on this computed item.