我使用 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)