Adam Mackintosh
1 min readDec 18, 2018

--

Here try this for a computed prop:

computed: {
pages() { return this.generatePageRange(this.metaData.current_page, this.metaData.last_page); },
},

With this method:
generatePageRange(currentPage, lastPage) {

const delta = 3;

const range = [];

for (let i = Math.max(2, (currentPage — delta)); i <= Math.min((lastPage — 1), (currentPage + delta)); i += 1) {

range.push(i);

}

if ((currentPage — delta) > 2) {

range.unshift(‘…’);

}

if ((currentPage + delta) < (lastPage — 1)) {

range.push(‘…’);

}

range.unshift(1);

if (lastPage !== 1) range.push(lastPage);

return range;

},

Then iterate over the computed prop:
<li v-for=”page in pages”>{{ page }}</li>

That should give you ellipses like the Laravel one.

--

--

Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.