In my work, the concept look like have lot of data in array , but the first one i want to show only 4 object (id 1 to id 4) in array. So , next i press next button that i want to loop the next object in array (id 5 to id 8) , then i press the back button they return to previous object that i pass them . i don't know the logic for this.
<template>
<v-container fluid>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12">
<v-card>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12" class="">
<v-row no-gutters class="d-flex">
<v-col
cols="6"
md="6"
v-for="(item, index) in content"
:key="`item-${index}`"
>
<v-col cols="6">
<v-card-text>
<p>{{ item.id }}</p>
<p>my name is : {{ item.title }}</p>
</v-card-text></v-col
>
</v-col>
</v-row>
</v-col>
</v-row>
<v-col cols="12" md="12" sm="12" class="d-flex">
<v-col cols="6" md="6" sm="6">
<v-btn medium elevation="" color="primary" @click="backpage()"
>Back</v-btn
>
</v-col>
<v-col cols="6" md="6" sm="6">
<v-btn medium elevation="" color="primary" @click="nextPage()"
>Next</v-btn
>
</v-col>
</v-col>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
showCounted: 4,
content: '',
nextValue: Number,
user: [
{
id: 1,
title: 'Saysana',
},
{
id: 2,
title: 'Binh',
},
{
id: 3,
title: 'Say',
},
{
id: 4,
title: 'Q',
},
{
id: 5,
title: 'a',
},
{
id: 6,
title: 'b',
},
{
id: 7,
title: 'c',
},
{
id: 8,
title: 'e',
},
{
id: 9,
title: 'e',
},
{
id: 10,
title: 'e',
},
{
id: 11,
title: 'e',
},
{
id: 12,
title: 'e',
},
],
}),
computed: {
defaultPage() {
return (this.content = this.user.slice(0, this.showCounted))
},
},
methods: {
async nextPage() {
this.content = this.user.slice(this.showCounted, this.showCounted 4)
console.log(this.content)
this.showCounted = this.showCounted 4
},
defaultData() {
this.content = this.user.slice(0, this.showCounted)
},
async backpage() {
const previous = -this.showCounted - 4
let to = 4
this.content = this.user.slice(previous, to)
},
},
mounted() {
this.defaultData()
},
}
</script>
CodePudding user response：
Try like following snippet:
Add data property currentPage: 1, then in next/back page increment/decrement current page and slice(this.showCounted * this.currentPage, this.showCounted * this.currentPage this.showCounted) / slice(this.showCounted * this.currentPage - this.showCounted, this.showCounted * this.currentPage). Also you can disable/enable buttons if you are on last/first page. This way you can chose whatever number of items you want to show just set showCounted to desired value.
Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
el: '#demo',
vuetify: new Vuetify(),
data(){
return {
showCounted: 4,
currentPage: 1,
content: '',
nextValue: Number,
user: [
{id: 1, title: 'Saysana'}, {id: 2,title: 'Binh'}, {id: 3, title: 'Say'},
{id: 4, title: 'Q'}, {id: 5, title: 'a'}, {id: 6, title: 'b'},
{id: 7, title: 'c'}, {id: 8, title: 'e'}, {id: 9, title: 'e'},
{id: 10, title: 'e'}, {id: 11, title: 'e'},{id: 12, title: 'e'},
],
isDisabledN: false,
isDisabledB: false
}
},
methods: {
defaultData() {
this.content = this.user.slice(0, this.showCounted)
},
nextPage() {
this.content = this.user.slice(this.showCounted * this.currentPage, this.showCounted * this.currentPage this.showCounted)
this.currentPage
this.checkPage()
},
backpage() {
this.currentPage--
this.content = this.user.slice(this.showCounted * this.currentPage - this.showCounted, this.showCounted * this.currentPage)
this.checkPage()
},
checkPage() {
if (this.showCounted * this.currentPage >= this.user.length) {
this.isDisabledN = true
this.isDisabledB = false
} else if(this.currentPage <= 1) {
this.isDisabledN = false
this.isDisabledB = true
} else {
this.isDisabledN = false
this.isDisabledB = false
}
}
},
mounted() {
this.defaultData()
this.checkPage()
},
})<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<div id="demo">
<v-app>
<v-main>
<v-container fluid>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12">
<v-card>
<v-row no-gutters>
<v-col cols="12" md="12" sm="12" class="">
<v-row no-gutters class="d-flex">
<v-col
cols="6"
md="6"
v-for="(item, index) in content"
:key="`item-${index}`"
>
<v-col cols="6">
<v-card-text>
<p>{{ item.id }}</p>
<p>my name is : {{ item.title }}</p>
</v-card-text></v-col
>
</v-col>
</v-row>
</v-col>
</v-row>
<v-col cols="12" md="12" sm="12" class="d-flex">
<v-col cols="6" md="6" sm="6">
<v-btn :disabled="isDisabledB" ref="back" medium elevation="" color="primary" @click="backpage()"
>Back</v-btn
>
</v-col>
<v-col cols="6" md="6" sm="6">
<v-btn :disabled="isDisabledN" ref="next" medium elevation="" color="secondary" @click="nextPage()"
>Next</v-btn
>
</v-col>
</v-col>
</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>