vue如何按页码或prev next点击显示内容？

Posted 2023-02-23

【中文标题】vue如何按页码或prev next点击显示内容？

【英文标题】：How to display content by page number or prev next clicked on the vue?

【发布时间】：2019-02-21 02:45:51

【问题描述】：

我的 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

https://bootstrap-vue.js.org/docs/components/pagination

【问题讨论】：

你能提供b-pagination的代码+按next或2时的网络响应是什么

@Frank Provost 我使用 coreui。看看这个：coreui.io/vue/demo/#/base/paginations 和 github.com/coreui/coreui-free-vue-admin-template/blob/master/…。好像是自动的

【参考方案1】：

您正在尝试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 -->

【讨论】：

还是不行。如果我单击第 2 页等，则包含不会更改。好像需要加@click之类的

我找到了解决方案。我在这里看到：github.com/buefy/buefy/issues/50。所以我加了@change="pageChange"

【参考方案2】：

我相信，你不会主动更新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: ''
              
          
        ,

然后在 fetch 中：

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

如果这没有帮助，请检查 fetch 中的 console.log(this) 是否是您的组件

【参考方案3】：

也许这不是回答你的最佳方式（重定向到视频），但我认为这个视频会比我更清楚地了解正在发生的事情以及如何解决它。

https://youtu.be/7lpemgMhi0k?t=17m42s

【讨论】：

我需要一个具体的答案