Bootstrap Vue Pagination не показывает данные на странице 2 - PullRequest
Новая
       23

Bootstrap Vue Pagination не показывает данные на странице 2

1 голос
/ 18 апреля 2019

Я использую VueJS, Bootstrap Vue Table и Pagination, чтобы показать список пользователей с нумерацией страниц. Данные, похоже, загружены правильно, но на странице 2 нумерации страниц нет данных.

У меня есть компонент Users, который передает необходимые данные для компонента начальной загрузки 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 я пытаюсь отобразить таблицу с разбивкой на страницы, используя данные, предоставленные компонентом Users.

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
}

Должно быть, я что-то делаю не так, но не могу понять, где это. Почему измененные данные не отразились на таблице?

...