Vue show next 10 items when press button-CodePudding

I'm trying to do load more function. When load more button is clicked show next 10 hidden items in v-for allCategories loop.

<template v-for="(category, i) in allCategories">
            <v-col :key="i" v-show="i <= 10" >
              <v-checkbox
              dense
              color="black"
              :label="category.title"
              :value="isCategoryChecked(category.id)"
              @click="() => selectCategory(category.id)"
            />
            </v-col>
          </template>

load more button

<v-btn color="black white--text"
   @click="showMoreCategories"
    :loading="loading">
    {{ $t('general.loadMore') }}
</v-btn>

showMoreCategories function

showMoreCategories() {

  }

How do i implement this?

CodePudding user response：

Assuming your variable allCategories contains all the categories you could possibly want (i.e. you don't have to fetch additional categories from a server or local store) then you can replace v-show="i <= 10" with v-show="i <= numberOfCategoriesToShow". Where numberOfCategoriesToShow is a new variable you have defined and initially set to 10.

Then your showMoreCategories function would look like this

showMoreCategories() {
   this.numberOfCategoriesToShow  = 10;
}