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を使ってページごとに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>
Author And Source
この問題について(V-forでsliceを 使ってlist array を制限する), 我々は、より多くの情報をここで見つけました https://qiita.com/tugsuugsg/items/5a582ecd9afba587e798著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .