Having trouble with my code and CSS. The pagination in Vue is working fine, but the links are changing size on certain pages. When clicking on the first or second number, the links remain the same size. However, when clicking on the third or fourth link, the links suddenly get bigger. Any help is much appreciated!
<template>
<h1>Pagination</h1>
<div class="pagination">
<a class="hover" @mouseover="isHovering = true" @mouseout="isHovering = false" @click="changePageToParent(1); changePage(1);">First</a>
<a class="hover" v-if="totalPage<=5"> <a class="hover" @mouseover="isHovering = true" @mouseout="isHovering = false" v-for="item in 5" v-bind:key="item" @click="changePageToParent(item); changePage(item)"> {{ item }} </a></a>
<a v-else class="hover">
<a v-if="lijeviOffset>=2" class="hover" >...</a>
<a class="hover" @mouseover="isHovering = true" @mouseout="isHovering = false" v-for="item in 5" v-bind:key="item" @click="changePageToParent(item); changePage(item)">
<a class="hover" v-if="currentPage == 2"> {{ item+offset+1 }} </a>
<a class="hover" v-else-if="currentPage == 1"> {{ item+offset+2 }}</a>
<a class="hover" v-else>
<a class="hover" v-if="desniOffset == 8"> {{ item + 2 }} </a>
<a class="hover" v-else-if="desniOffset == 9"> {{ item + 2}} </a>
<a class="hover" v-else>{{ item+offset }}</a>
</a>
</a>
<a v-if="provjera" class="hover">...</a>
</a>
<a class="hover" @mouseover="isHovering = true" @mouseout="isHovering = false" @click="changePageToParent(totalPage); changePage(totalPage)">Last</a>
</div>
</template>
<script>
export default {
name: 'Pag',
data() {
return {
currentPage: 1,
da: null,
totalPage:7,
perPage: 2,
isHovering: false,
isActive: false,
}
},
props: {
total: Number,
}, computed: {
offset: function(){
return this.currentPage-this.perPage-1;
},
provjera: function(){
return this.currentPage+this.perPage<this.totalPage ? 1 : null
},
desniOffset: function () {
return this.currentPage+this.perPage;
},
lijeviOffset: function () {
return this.currentPage-this.perPage;
},
}, methods: {
changePageToParent(id) {
this.$emit('change-page-to-parent', id)
},
changePage(id) {
this.currentPage = id
},
hoverToggle(subjectId, action){
switch(action){
case 'mouseOver':
return this.hoveredSubjectId = subjectId;
case 'mouseLeave':
return this.hoveredSubjectId = "";
}
},
toggleClass() {
this.isActive = !this.isActive;
}
}
}
</script>
<style scoped>
body {
color: blue;
}
.pagination {
width:0 auto;
}
.hover a {
margin:5px;
background-color: red;
}
</style>