我的 vue 组件是这样的:
<template>
...
<b-col v-for="item in items"
v-bind:key="item.id"
cols="2">
...
<strong slot="header" class="text-dark" :title="item.tittle" >{{item.tittle}}</strong><br/>
...
<strong class="bg-warning text-dark"><i class="fa fa-money"></i> <b>{{item.price}}</b></strong><br/>
...
</b-col>
...
<b-pagination size="sm" :total-rows="itemsPagination.total" :per-page="itemsPagination.per_page" v-model="itemsPagination.current_page" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
...
</template>
<script>
export default {
...
data () {
return{
items: '',
itemsPagination: ''
}
},
mounted: function () {
this.getItems()
},
methods: {
getItems() {
let params = []
...
let request = new Request(ApiUrls.items + '?' + params.join('&'), {
method: 'GET',
headers: new Headers({
'Authorization': 'bearer ' + this.$session.get(SessionKeys.ApiTokens),
'Content-Type': 'text/plain'
})
})
fetch(request).then(r=> r.json())
.then(r=> {
this.items = r.data
this.itemsPagination = r
})
.catch(e=>console.log(e))
}
}
}
</script>
如果我console.log(this.itemsPagination)
,控制台中的结果如下:
我对应用程序中分页的看法如下:
如果脚本执行,它将显示第1页中项目的内容。但是如果我单击第2页等,项目的内容不会改变。我仍然很困惑如何让它正常工作
如何解决这个问题?
更新
我使用coreui
https://coreui.io/vue/demo/#/base/paginations
https://github.com/coreui/coreui-free-vue-admin-template/blob/master/src/views/base/Paginations.vue
最佳答案
您正在尝试v-model="itemsPagination.current_page"
,但您将itemsPagination
初始化为空字符串:
data () {
return{
items: '',
itemsPagination: ''
}
}
Vue cannot detect property addition or deletion ,所以没有任何反应。您需要将 itemsPagination
初始化为包含(至少)current_page
的对象:
data () {
return{
items: '',
itemsPagination: {
current_page: 1
}
}
}
更新: 您实际上可以编辑 example here 。双击右上角进行编辑,粘贴以下代码:
<template>
<div>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10">
</b-pagination>
<br>
<h6>Small</h6>
<b-pagination size="sm" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10">
</b-pagination>
<br>
<h6>Large</h6>
<b-pagination size="lg" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10">
</b-pagination>
<br>
<div>currentPage: {{itemsPagination.current_page}}</div>
</div>
</template>
<script>
export default {
data () {
return {
itemsPagination: {
current_page: 1
}
}
}
}
</script>
<!-- pagination-1.vue -->
关于javascript - vue中如何按页码或上一页下一页显示内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52363283/