[Vuejs]-Vue.JS Custom Truncated Pagination Problem

You’re getting this result because for 4-10, you’re outputting ...

Also you’re repeating the UL so your output will look like

<ul>
    <li>1</li>
</ul>
<ul>
    <li>2</li>
...

Try

<template>
    <ul>
        <template v-for="number in pages" :key="number">
            <li v-if="number < pageStart">
                <button>{{number}}</button>
            </li>
            <li v-else-if="number === Math.ceil(pages/2)">
                ...
            </li>
        </template>
    </ul>
</template>

This will only output ... if the page number is half (rounded up if odd) of the total pages, so you won’t get repeating ellipses for all the middle pages, otherwise no LI renders at all.

If you want something like 1 2 3 ... 8 9 10 just use something like

<li v-if="number <= 3 || number > (pages - 3)">
    <button>{{number}}</button>
</li>

I’ve built a solution where

• the current page
• the next and previous page
• the first and last page

are shown. Ellipses are added via CSS.

<template>
    <section class="menu">
    <ul>
      <button @click="previous">prev</button>
      <template v-for="page in pages" :key="page">
        <li :class="{current: currentPage === page, hide: !shouldShowPageInMenu(page)}">{{page}}</li>
      </template>
      <button @click="next">next</button>
    </ul>
  </section>
</template>

Using the following JS and CSS:

const currentPage = ref(5)
const pages = ref(10)

function shouldShowPageInMenu(page) {
  return (isCurrentPage(page) || isNextOrPreviousPage(page) || isFirstOrLastPage(page))
}
  
function isCurrentPage(page) {
  if(page === currentPage.value) {
    return true
  }
}
  
function isNextOrPreviousPage(page) {
  const current = currentPage.value
    if(page+1 === current || page-1 === current) {
    return true
  }
}
  
function isFirstOrLastPage(page) {
  if(page === 1 || page === pages.value) {
    return true
  }
}

// ...
li.current {
    font-weight: bold;
    color: black;
}
li.hide {
    display: none;
}
li.hide + :not(.hide)::before {
    content: '...';
    display: inline-block;
    margin-right: 0.4rem;
}

There is a Vue SFC Playground with a full example.