Vue Bootstrap分页

Question

我使用Vue引导程序分页，当我选择下一页时，如何更改currantPage时如何获得真实数据，但是当我再次单击时，它会从DB加载真实数据。

当我单击next_page和Prev_page时，它将加载agian数据，但不应单击

组件HTML

<template>
    <!-- Main Content -->
    <section class="content-wrap">
        <div class="ecommerce-orders">
            <!-- Breadcrumb -->
            <div class="ecommerce-title">
                <div class="row">
                    <div class="col s12 m9 l10">
                        <!--h1>@@title</h1-->
                        <nav>
                            <menus></menus>
                        </nav>
                    </div>
                    <div class="col s12 m3 l2 right-align">
                        <a href="" class="btn grey lighten-3 grey-text z-depth-0 chat-toggle">
                            <i class="fa fa-comments"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- /Breadcrumb -->
            <!-- Products -->
            <div class="card">
                <div class="title">
                    <h5>{{ $route.meta.title }}</h5>
                    <div class="btn-group right">
                        <router-link tag="a" class="btn btn-small z-depth-0" :to="{ name: 'supdepartment.create' }">
                            <i class="mdi mdi-content-add"></i>
                        </router-link>
                        <a href="#" @click="deleteCheckbox" class="btn btn-small red lighten-1 z-depth-0">
                            <i class="mdi mdi-action-delete"></i>
                        </a>
                    </div>
                </div>
                <div class="content">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th v-for="(column, key) in columns" :key="key">{{ column }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">  -->
                                <tr v-for="(item, key) in options.data" :key="key">
                                    <th>
                                        <input type="checkbox" v-model="checkbox" :value="item.id" :id="'checkbox'+ item.id">
                                        <label :for="'checkbox' + item.id"></label>
                                    </th>
                                    <td>{{ item.name }}</td>
                                    <td>{{ item.school_gender }}</td>
                                    <td>{{ item.edumanags.name }}</td>
                                    <td>{{ item.departments.name }}</td>
                                    <td>{{ item.supdepartments.name }}</td>
                                    <td>{{ item.address }}</td>
                                    <td>{{ item.phone }}</td>
                                    <td>{{ item.email }}</td>
                                    <td>{{ item.facebook }}</td>
                                    <td>{{ item.classifications.name }}</td>
                                    <td>{{ item.supclassifications.name }}</td>
                                    <td>{{ item.visited_status }}</td>
                                    <td>{{ item.called_status }}</td>
                                    <td>
                                        <router-link tag="a" :to="{ name: 'supdepartment.edit', params: { id: item.id } }" class="btn btn-small z-depth-0">
                                            <i class="mdi mdi-editor-mode-edit"></i>
                                        </router-link>
                                        <!-- <a href="#" class="btn btn-small red lighten-1 z-depth-0">
                      <i class="mdi mdi-action-delete"></i>
                    </a> -->
                                    </td>
                                </tr>
                                <!-- </transition-group> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <b-pagination align="right" size="md" :total-rows="options.total" @click.native="getResult" v-model="currentPage" :per-page="options.per_page">
                            </b-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Products -->
        </div>
    </section>
    <!-- /Main Content -->
</template>

Vue脚本

<script>
    import Menus from '../configs/Menus'

    export default {
        name: 'school',
        props: ['link'],
        components: {
            Menus
        },
        data() {
            return {
                columns: [
                    'Select',
                    'Name',
                    'School Gender',
                    'Government',
                    'Education Managment',
                    'Department',
                    'SubDepartment',
                    'Phone',
                    'Email',
                    'Facebook',
                    'Classification',
                    'SubClassifications',
                    'Called',
                    'Visited',
                    'Actions',
                ],
                options: [],
                checkbox: [],
                currentPage: 1,
            }
        },
        mounted() {
            this.getResult();
        },
        methods: {
            getResult() {
                this.$store.dispatch('schoolOptions', this.currentPage)
                    .then(response => {
                        this.options = this.$store.state.school.index
                    })
            },
            deleteCheckbox() {
                this.$store.dispatch('DeleteCheckboxSchool', {
                        id: this.checkbox
                    })
                    .then(response => {
                        this.successMessage = 'School Successfully!'
                        this.$toast.success({
                            title: this.successMessage,
                            message: 'School has been Delete'
                        })
                    })
            }
        },
        computed: {
            pagnation() {
                this.options.current_page = this.currentPage
            },
        }
    }
</script>

Vuex操作

schoolOptions(context, page) {
            return new Promise((resolve, reject) => {
                axios.get('/school?page=' + page)
                .then(response => {
                    resolve(response)
                    context.commit('schoolOptions', response.data);
                })
                .catch(error => {
                    reject(error)
                })
            })
        },

请帮助我 比你