как использовать vuetify pagination для панели расширения? - PullRequest
Новая
       6

как использовать vuetify pagination для панели расширения?

0 голосов
/ 13 января 2020

Я использую 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>
...