How to display a list from an array several items at a time, and show a certain amount more on the “more” button?

Question

Vue.js

There is an array, how to show its content in parts? For example, 10 pieces at a time with loading by a button of 10 pieces?

<li v-for="article of articles" :key="article.slug">
        <NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
          <img v-if="article.img"  :src="article.img" />
          <div>
            <h2 >{{ article.title }}</h2>
            <p>{{ article.author.name }}</p>
            <p>{{ article.description }}</p>
          </div>
        </NuxtLink>
      </li>

Answer 1

data: () => ({
  numArticlesToShow: 5,
  ...
}),
computed: {
  articlesToShow() {
    return this.articles.slice(0, this.numArticlesToShow);
  },
  ...
},

<li v-for="n in articlesToShow">
  ...
</li>
...
<button @click="numArticlesToShow += 5" :disabled="numArticlesToShow >= articles.length">
  показать ещё
</button>