小编Ngh*_* Le的帖子

Bootstrap Vue 分页不显示第 2 页的数据

我使用 VueJS、Bootstrap Vue Table 和 Pagination 来显示分页的用户列表。数据似乎已正确加载,但分页的第 2 页未显示任何数据。

我有一个 Users 组件,它为 C 表引导组件传递必要的数据,如下所示:

用户.vue

<c-table
                :tableData="tableData"
                :fields="fields"
/>
<script>
import cTable from '../base/Table.vue'
import UserAPI from '../../api/user.js'
export default {
    created () {
        var vueComponent = this
        UserAPI.getUsers()
        .then(response => {
            if (response.data.success) {
                vueComponent.tableData = response.data.data
            } 
        })
    }
}
</script>
Run Code Online (Sandbox Code Playgroud)

在表组件中,我尝试使用用户组件提供的数据来渲染分页表。

表.vue

<b-table
        :items="tableData.data"
        :fields="fields"
        :current-page="tableData.current_page"
        :per-page="tableData.per_page"
>
</b-table>

<nav>
   <b-pagination
     v-model="tableData.current_page"
     :total-rows="tableData.total"
     :per-page="tableData.per_page"
     prev-text="Prev"
     next-text="Next"
     hide-goto-end-buttons
    />
</nav>

<script>
export default {
    name : 'cTable',
    props: …
Run Code Online (Sandbox Code Playgroud)

pagination vue.js bootstrap-4 vuejs2 bootstrap-vue

4
推荐指数
1
解决办法
6052
查看次数

标签 统计

bootstrap-4 ×1

bootstrap-vue ×1

pagination ×1

vue.js ×1

vuejs2 ×1