Как отобразить контент по номеру страницы или предварительно кликнув на vue?

Question

Мой 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 и т. Д., Содержимое элемента не изменится. Я все еще смущен, чтобы заставить это работать хорошо

Как я могу решить эту проблему?

Update

я использую 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 / документы / компоненты / пагинация

Answer 1

Возможно, это не лучший способ ответить вам (перенаправление на видео), но я думаю, что это видео будет яснее, чем я, о том, что происходит, и о том, как ее решить.

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

Answer 2

Вы пытаетесь v-model="itemsPagination.current_page", но инициализируете itemsPagination как пустую строку:

    data () {
      return{
          items: '',
          itemsPagination: ''
      }
    }

Vue не может обнаружить добавление или удаление свойства , поэтому ничего не реагирует.Вам нужно инициализировать itemsPagination как объект, который содержит (как минимум) current_page:

    data () {
      return{
          items: '',
          itemsPagination: {
            current_page: 1
          }
      }
    }

Обновление: Вы можете отредактировать пример здесь ,Дважды щелкните правый верхний угол, чтобы отредактировать его, и вставьте этот код:

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

Answer 3

Я полагаю, вы не обновляете 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, если это ваш компонент