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.

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

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.