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

Posted 2023-02-22

技术标签:

【中文标题】Bootstrap Vue分页不在第2页显示数据【英文标题】：Bootstrap Vue Pagination does not show data on page 2 【发布时间】：2019-09-08 07:17:56 【问题描述】：

我正在使用 VueJS、Bootstrap Vue Table 和 Pagination 来显示具有分页功能的用户列表。数据似乎加载正确，但分页的第 2 页没有显示任何数据。

我有一个用户组件，它为 C 表引导组件传递必要的数据，如下所示：

Users.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.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

我一定是做错了什么，但我不知道错在哪里。为什么更改后的数据没有反映在表格上？

【问题讨论】：

【参考方案1】：

我将 per-page="0" 更改为 <b-table> 而不是 per-page="tableData.per_page" 并且成功了。

【讨论】：

【参考方案2】：

移动：