Question

我正在将Vue.js和vuex与vuetify组件一起使用。使用vuex状态管理器，我创建了我的状态和获取方法以获取数据我正在使用v-expansion-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>

Answer 1

您可以使用v-data-iterator。请检查此API。

扩展面板如何使用vuetify分页？

1 个答案: