Level 9
Here isa component that I used for a pagination in Vue. It passes the current page up to the chain to then filter the items shown with limitBy in the parent component. It also uses Bootstrap pagination classes for styling. Hopefully this helps.
<template>
<ul class="pagination">
<li v-if="active > 3">
<a href="#" @click.stop.prevent="update(0)">{{ 1 }}</a>
</li>
<li v-if="active > 3" class="disabled">
<a href="#">...</a>
</li>
<li v-for="n in numbers" :class="{'active' : n == active}">
<a href="#" @click.stop.prevent="update(n)">{{ n+1 }}</a>
</li>
<li v-if="active < length-4" class="disabled">
<a href="#">...</a>
</li>
<li v-if="active < length-4">
<a href="#" @click.stop.prevent="update(length)">{{ length+1 }}</a>
</li>
</ul>
</template>
<script>
export default{
data(){
return{
n: 0,
active: 0
}
},
props:['items', 'count', 'type'],
computed: {
length: function() {
return Math.ceil(this.items.length / this.count);
},
min: function() {
if(this.active < 4) {
return 0;
} else if ( this.active > this.length - 7) {
return this.length-7;
} else {
return this.active-2;
}
},
max: function() {
if (this.length < 7) {
return this.length;
} else if(this.active < 4) {
return 7;
} else if ( this.active > this.length - 7) {
return this.length;
} else {
return this.active+3;
}
},
numbers: function() {
var temp = [];
for(var i = this.min; i < this.max; i++) {
temp.push(i);
}
return temp
}
},
methods: {
update: function(n){
this.active = n;
this.$dispatch('page-' + this.type, this.active);
}
}
}
</script>