Я использую Vue. js и vuex с компонентами vuetify. с помощью менеджера состояний vuex я создал свое состояние и геттеры для получения моих данных. Я использую v-extension-panel для отображения данных, проблема в том, что я хочу использовать нумерацию страниц для этих панелей. Я пробовал код, приведенный ниже, но он не разбит на страницы. Может кто-нибудь, пожалуйста, помогите мне в этом случае
<script>
import {mapGetters} from 'vuex'
export default {
name: "BlueFlagProjects",
data() {
return {
page: 1,
perPage: 1,
pages: [0,1,2,3,4,5,]
}
},
computed: {
...mapGetters(['allblue']),
visiblePages () {
return this.pages.slice((this.page - 1)* this.perPage, this.page* this.perPage)
}
},
}
</script>
<template>
<v-expansion-panels
v-model="panel"
multiple
popout
>
<v-expansion-panel v-for="items in allblue" :key="items.id">
<v-expansion-panel-header class="font-weight-bold">{{items.title}}
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col>
<v-simple-table>
<template v-slot:default>
<tbody>
<tr>
<td class="table">Project</td>
<td class="text">{{items.projectT}}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-col>
<v-col>
<v-card class="elevation-24" width="400">
<v-img src="../assets/img3.png" width="400"></v-img>
</v-card>
</v-col>
</v-row>
<br/>
<p class="text font-weight-thin">
{{items.text}}
</p>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-pagination
v-model="page"
:length="Math.ceil(pages.length/perPage)"
></v-pagination>
</template>