V-forでsliceを 使ってlist array を制限する

comment.vue

上に
<v-for="comment in comments" :key"comment.id">
{{id}} {{name}}
</div>
<button :disabled="currentPage == 1" @click="prevPage">少なく表示する</button>
      <button :disabled="currentPage == totalPages" @click="nextPage">
        もっと見る
      </button>

Scriptのところに下記を入れる

comment.vue

 currentPage: number = 1
//コメントをsliceを使ってページごとに５個ずつ出す
  get comments() {
    return this.visaCommentResponse.slice(0, this.currentPage * 5)
  }
//ページの数をわかる
  get totalPages() {
    return Math.ceil(this.commentCount / 5)
  }
//もっと見るボタン
  nextPage() {
    if (this.currentPage < this.totalPages) this.currentPage++
  }
//少なく表示するボタン
  prevPage() {
    this.currentPage = this.currentPage - 1 || 1
  }

結果はこれです。

EDIT* もう少し簡単にできた。

script のところに

comment.vue

commentsShown?: number = 10

get comments() {
    return this.visaCommentResponse?.slice(0, this.commentsShown)
  }

  loadMore() {
    this.commentsShown += 10
  }

  loadLess() {
    this.commentsShown -= 10
  }

ボタンは

comment.vue

<button
        v-if="
          visaCommentResponse.length > 10 &&
            commentsShown < visaCommentResponse.length
        "
        @click="loadMore"
      >
        Load More
      </button>
      <button v-if="commentsShown > 10" @click="loadLess">
        Load less
      </button>