V-for에서 slice를 사용하여 list array 제한
上に
<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>
Reference
이 문제에 관하여(V-for에서 slice를 사용하여 list array 제한), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tugsuugsg/items/5a582ecd9afba587e798텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)