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>

스크립트에 다음을 넣습니다.

comment.vue
 currentPage: number = 1
//コメントをsliceを使ってページごとに5個ずつ出す
  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>

좋은 웹페이지 즐겨찾기