gpt4 book ai didi

vue.js - Bootstrap Vue 分页不显示第 2 页上的数据

转载 作者:行者123 更新时间:2023-12-04 01:44:49 25 4
gpt4 key购买 nike

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

我有一个用户组件,它为 C 表 Bootstrap 组件传递必要的数据,如下所示:

用户.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>

在 Table 组件中,我尝试使用 Users 组件提供的数据使用分页呈现表格。

表.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: {
tableData: {
type : Object,
default: {},
},
fields: {
type : Array,
default: [],
},
},
watch: {
'tableData.current_page': function (newVal, oldVal) {
var vueComponent = this
if (oldVal && newVal) {
axios.get(this.tableData.path + '?page=' + newVal)
.then(response => {
if (response.data && response.data.success) {
vueComponent.tableData = response.data.data
debugger
}
})
}
}
}
}

因此,当我第一次加载页面时,它显示了正确的用户列表,但是当我切换到第 2 页时,在调试器点,尽管它从服务器正确检索了数据,但它在表上没有显示任何内容。
我也收到了这个警告:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "tableData"

这是调试器点的 tableData 数据:
{  
"current_page":2,
"data":[
{
"id":3,
"email":"foo1@test.com",
"email_verified_at":"2019-04-13 01:27:14",
"active":2,
"created_at":"2019-04-13 01:26:53",
"updated_at":"2019-04-13 01:27:14",
"deleted_at":null,
},
{
"id":4,
"email":"foo2@test.com",
"email_verified_at":"2019-04-13 01:27:14",
"active":0,
"created_at":"2019-04-13 01:26:53",
"updated_at":"2019-04-13 01:27:14",
"deleted_at":null,
}
],
"first_page_url":"http:\/\/localhost:8000\/api\/users?page=1",
"from":3,
"last_page":3,
"last_page_url":"http:\/\/localhost:8000\/api\/users?page=3",
"next_page_url":"http:\/\/localhost:8000\/api\/users?page=3",
"path":"http:\/\/localhost:8000\/api\/users",
"per_page":2,
"prev_page_url":"http:\/\/localhost:8000\/api\/users?page=1",
"to":4,
"total":6
}

我一定是做错了什么,但我不知道它在哪里。为什么更改后的数据没有反射(reflect)在表上?

最佳答案

我改了per-page="0"<b-table>而不是 per-page="tableData.per_page"它奏效了。

关于vue.js - Bootstrap Vue 分页不显示第 2 页上的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55737778/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com