So, I have a dashboard where I want to display some cards. There should only be four visible at a time and when clicking on the arrow you just want to move one step to the next card. So let’s say cards 1-4 are showing and when clicking the right arrow you should be able to see 2-5. Right now I only have that when you click the right arrow you jump pass 1-4 and go straight to 5-10.
So right now I have this:
computed: {
cardsToDisplay(): Status[] {
return this.cards.slice(this.page * 4, (this.page + 1) * 4)
},
},
methods: {
setCards(no: number) {
this.page = this.page + delta
},
},
And in the template the left and right arrow buttons look like this:
<v-icon v-if="page !==" class="black--text font-weight-bold"
@click="setPage(-1)">
chevron_left</v-icon>
<v-icon
v-if="columns.length > (page + 1) * 4"
class="black--text font-weight-bold"
@click="setPage(1)"
>chevron_right</v-icon
>
But how can I make it just move to the next card? 🙂