vue如何按页码或prev下一次点击显示内容? [英] How to display content by page number or prev next clicked on the vue?
问题描述
我的 vue 组件是这样的:
...<b-col v-for="项目中的项目"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=下一步"隐藏转到结束按钮/>...<脚本>导出默认{...数据 () {返回{项目: ''，项目分页:''}},挂载:函数(){this.getItems()},方法: {获取项目(){让参数 = []...let request = new Request(ApiUrls.items + '?' + params.join('&'), {方法:'获取'，标题:新标题({'授权':'承载' + this.$session.get(SessionKeys.ApiTokens),'内容类型':'文本/纯文本'})})获取(请求).然后(r=> r.json()).then(r=>{this.items = r.datathis.itemsPagination = r}).catch(e=>console.log(e))}}}如果我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
https://bootstrap-vue.js.org/docs/components/pagination
您正在尝试 v-model="itemsPagination.current_page"，但您将 itemsPagination 初始化为空字符串:
数据 () {返回{项目: ''，项目分页:''}}Vue 无法检测属性的添加或删除，所以没有任何反应.您需要将 itemsPagination 初始化为一个包含(至少)current_page 的对象:
数据 () {返回{项目: ''，项目分页:{当前页面:1}}}更新:您实际上可以在此处编辑示例.双击右上角进行编辑，粘贴这段代码:
<div><h6>默认</h6><b-pagination size="md" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10"></b-分页><br><h6>小</h6><b-pagination size="sm" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10"></b-分页><br><h6>大</h6><b-pagination size="lg" :total-rows="100" v-model="itemsPagination.current_page" :per-page="10"></b-分页><br><div>currentPage: {{itemsPagination.current_page}}</div><脚本>导出默认{数据 () {返回 {项目分页:{当前页面:1}}}}<!-- pagination-1.vue -->
My vue component like this :
<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>
If I console.log(this.itemsPagination), the result in console like this :
My view of pagination in my application like this :
If the script executed, it will display content of item in page 1. But if I click page 2 etc, the content of item is not change. I'm still confused to make it work well
How can I solve this problem?
Update
I using coreui
https://coreui.io/vue/demo/#/base/paginations
https://github.com/coreui/coreui-free-vue-admin-template/blob/master/src/views/base/Paginations.vue
https://bootstrap-vue.js.org/docs/components/pagination
You are trying to v-model="itemsPagination.current_page", but you initialize itemsPagination as an empty string:
data () {
return{
items: '',
itemsPagination: ''
}
}
Vue cannot detect property addition or deletion, so nothing reacts. You need to initialize itemsPagination as an object that contains (at least) current_page:
data () {
return{
items: '',
itemsPagination: {
current_page: 1
}
}
}
Update: You can actually edit the example here. Double-click the upper right corner to edit it, and paste in this code:
<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 -->
这篇关于vue如何按页码或prev下一次点击显示内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
