Question

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

我有一个Users组件，可以为C表引导程序组件传递必要的数据，如下所示：

Users.vue

 <MapView
    style={{ alignSelf: 'stretch', height: 150 }}
    provider={MapView.PROVIDER_GOOGLE}
    initialRegion={{
        latitude: parseFloat(this.state.latitud),
        longitude: parseFloat(this.state.longitud),
        latitudeDelta: 0.0922 / 15,
        longitudeDelta: 0.0421 / 15,
    }}>
    <MapView.Marker
        coordinate={{
            latitude: parseFloat(this.state.latitud),
            longitude: parseFloat(this.state.longitud)
        }}
        title='Ubicacion'
    //description={this.state.ubicacionExactaReversa.name}
    />
</MapView>

在Table组件中，我尝试使用Users组件提供的数据进行分页渲染。

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

因此，当我第一次加载页面时，它显示了正确的用户列表，但是当我切换到页面2时，尽管它从服务器正确地检索了数据，但在调试器点上，表上却什么也没有显示。我也收到此警告：

<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
                    }
                })
            }
        }
    }
}

这是调试器处tableData的数据：

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"

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

Answer 1

移动：

current-page="tableData.current_page"

从b-table到b-pagination，然后将@input="youTableData"添加到b-pagination。

Answer 2

感谢，我在经过数小时的谷歌搜索后解决了这些问题。对于那些也遇到此问题的人，我更改了“ per-page =” 0“而不是：per-page =” tableData.per_page“。

Answer 3

Bootstrap Vue的分页组件中有一个错误。双向数据绑定（即v模型）不起作用，因此即使显示页面在用户界面中已更改，它也不会固有地更改绑定变量。我找到了解决方法。

删除

v-model="currentPage"

在分页组件上并将其替换为

@change="currentPage = $event"

这样做将添加一个事件侦听器，该侦听器将从事件中更新变量。直接从DOM值属性到currentPage变量

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

3 个答案: