title: Pagination Logic - Vue
body: <p>Hey hopefully someone can help me out, Ive started a new job and my brain has turned to utter crap and seemingly simple tasks are now causing me issues, its like I left my brain at my last job? Anyway I have some pagination that Im trying to build the logic for.</p>
  <p>I have a v-for that loops through the data to build the pagination using the index number as the page number. I also know what page number is active and how many total pages. Im using v-if to either show or hide the pagination items. I want to show 8 items at any one time and hide the rest so if page 2 is active, items 2-9 would be shown and rest would be hidden, that part works fine. What im trying to do is when I get towards the end of the list I still want to keep 8 items on screen and the active item just advances i.e so 9 items in total, item 2 is set to active and on screen I can see items 2-9, when I click next I still want to have 8 items on screen (2-9) but now the active item is item 3 and so on. Can this be done using the v-if or am I loosing the plot and trying to achieve the impossible?</p>
  <pre><code>&lt;div v-for=&quot;index in totalPages&quot; :key=&quot;index&quot;&gt;
                &lt;div
                  v-if=&quot;
                    index &gt;= activeItem &amp;&amp;
                    index &lt; activeItem + onScreenTotal
                  &quot;
                  :class=&quot;index === activeItem ? 'active' : null&quot;
                &gt;
                  {{ index }}
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  <ul>
  <li><strong>totalPages</strong> = total number of pagination items</li>
  <li><strong>activeItem</strong> = the active page item</li>
  <li><strong>onScreenTotal</strong> = how many items I want to show on screen at any one time</li>
  </ul>