Пагинация с Vue JS

Question

Я пытаюсь создать функцию разбиения на страницы для отображения блоков HTML с шагом 2, а затем пользователь может выбрать страницу.Количество блоков, через которые оно пройдет, определяется v-for.Вот блок кода, чтобы показать это

<template v-for="(ad, index) in ads" v-cloak>
                  <div class="box ad-box" v-if="showAds(index)" @click="hideInput(index)">
                    <span> {{ lines(index, 'headline1') }} | </span>
                    <span> {{ lines(index, 'headline2') }} | </span>
                    <span> {{ lines(index, 'headline3') }} </span>
                    <span class="icon is-pulled-right has-text-grey-light has-text-weight-light" @click="deleteAd()">
                      <div v-show="ad.boolean">
                        <p class="">X</p>
                      </div>
                    </span>
                    <br>
                    <p><span class="is-size-7">{{lines(index, 'finalurl')}}</span><span class="is-size-7 has-text-success" v-if="lines(index, 'path1') !== '' ">/{{lines(index, 'path1')}}/{{lines(index,'path2')}}</span></p>
                    <span class="is-size-7 is-grey">{{lines(index, 'desc1') + lines(index, 'desc2')}} </span>
                  </div>
                  <br />
</template>
                <nav class="pagination" role="navigation" aria-label="pagination">
                  <ul class="pagination-list">
                    <li>
                      <a class="pagination-link is-current">1</a>
                    </li>
                    <li v-show="ads.length > 2">
                      <a class="pagination-link" @click="adPage = 2">2</a>
                    </li>
                    <li v-show="ads.length > 4">
                      <a class="pagination-link" @click="adPage = 3">3</a>
                    </li>
                    <li v-show="ads.length > 6">
                      <a class="pagination-link" @click="adPage = 4">4</a>
                    </li>
                    <li v-show="ads.length > 8">
                      <a class="pagination-link" @click="adPage = 5">5</a>
                    </li>
                  </ul>
                </nav>

У меня есть adPage в свойстве data, чтобы отслеживать, когда пользователь нажимает на страницу, а номера страниц отображаются только в виде необходимого количества шаблонов.на самом деле доступно.У меня есть простая логика в функции, но я не совсем уверен, куда идти дальше.Я думал, что проверю индекс того, что итерируется, и проверим, чтобы он находился в дельте 2 от того, что когда-либо было в этом adPage.

newAds:[
  [
    {
      id: 0,
    headline1: 'first 1',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: true
    },
    {
     id: 0,
    headline1: 'first 2',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    }
  ],
  [
    {
      id: 1,
    headline1: 'second 1',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    },
    {
     id: 1,
    headline1: 'second 2',
    headline2: 'Headline 2',
    headline3: 'headline3',
    desc1: 'This is your description 1',
    desc2: 'This is your description 2',
    finalurl: 'www.finalURL.com',
    path1: '',
    path2: '',
    boolean: false
    }
  ]
]

Answer 1

Вот фрагмент, показывающий то, что я упомянул в своем комментарии.Вы даже можете изменить количество объявлений на странице

new Vue({
  el: '#app',
  data: {
    perPage: 2,
    ads: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ay', 'bee', 'cee'],
    adPage: 1
  },
  computed: {
    currentAds() {
      const startIndex = this.perPage * (this.adPage - 1);
      const endIndex = startIndex + this.perPage;
      return this.ads.slice(startIndex, endIndex);
    }
  }
});

.is-current {
  font-weight: bold;
}

<script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
<div id="app">
  <input v-model.number="perPage">
  <template v-for="(ad, index) in currentAds" v-cloak>
    <div>{{ad}}</div>
  </template>
  <nav class="pagination" role="navigation" aria-label="pagination">
    <ul class="pagination-list">
      <li v-for="p in Math.ceil(ads.length/perPage)">
        <a class="pagination-link" :class="{'is-current': adPage == p}" @click="adPage = p">{{p}}</a>
      </li>
    </ul>
  </nav>
</div>