Is there a way to increment the slice method in v-for loop?

Question

This might sound not achievable but I'm just curious if it's possible to invoke the slice method in the v-for loop to increment the slice value when a function is invoked. It is like a LoadMore function that when you click a button it will load more data. Like if I have

<div v-for="(itm, index) in stockList.slice(0, 5)" :key="itm.stockId">
    ...   
</div>
<input type="button"  v-on:click="ShowMore"  />

Methods:

ShowMore(){
....// increment the slice in the v-for loop binding
counter = counter + 5.
this.stockList.slice(0, counter);
}

Something like that...Would that be achievable? Thanks.

Answer 1

<div v-for="(itm, index) in stockList.slice(0, comCounter)" :key="itm.stockId">
    ...   
</div>
<input type="button"  v-on:click="ShowMore"  />

Methods:

ShowMore(){
....// increment the slice in the v-for loop binding
mapCredential.state.comCounter = this.comCounter + 5;
this.comCounter = mapCredential.state.comCounter;
}

With the help of Vuex state variable. The increment counter is working.