我的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 -->
我相信,你不会反应性更新qazxsw poi。
你能尝试一下:
items
然后在获取:
data () {
return{
container:{
// for Vue.set I didnt found how to do it without nested fields for data object, so did like that on my own project
items: '',
itemsPagination: ''
}
}
},
见Vue.set(this.container, 'items', r.data);
// or this.$set, if you dont use arrow function here, and not Vue accessable
如果这没有帮助,检查你的https://vuejs.org/v2/guide/reactivity.html内的console.log(this)
,如果它是你的组件
也许这不是回答你的最佳方式(重定向到视频),但我认为这个视频比我更清楚发生了什么,以及如何解决它。
fetch