Как вывести список из массива по несколько пунктов за раз, и показывать ещё энное количество по кнопке «ещё»?

Question

[Serge999111]

Есть массив, как показывать его контент по частям? К примеру по 10 штук за раз с подгрузкой по кнопке по 10 штук?

<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

[0xD34F]

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>