I have a problem, I work with vue js, vuetify2, I have a table of elements with a pagination, currently there are 2 pages, but there can always be more.
I have a modal with a “See more” button in a component, from that button I emit an event passing the id, I take the id in the component where the table is, and I have a method where I look for the id, the values, the emit and all that works well, it emits and listens well.
This method:
Component moreInfo:
showMoreInfo() {
store.dispatch('mapState/showMoreInfo')
const elId = this.arrInfo.id
this.$root.$emit('elSelected', elId)
console.log('Event elSelected with ID:', elId)
this.$nextTick(function() {
store.dispatch('mapState/setExpanded', this.arrInfo)
})
},
Component table:
calculateElPage(elId) {
const foundEl = this.arr.find(item => item.id === elId)
if(foundEl) {
const index = this.arr.indexOf(foundEl)
console.log('INDEX', index);
const elPage = Math.floor(index / this.itemsPerPage) + 1
console.log('ENTITYPAGE', elPage);
if (elPage === this.page) {
this.page = elPage
console.log('PAGE', this.page);
}
return entityPage
} else {
return -1
}
},
mounted() {
this.$root.$on('elSelected', (elId) => {
const elPage = this.calculateElPage(elId)
console.log('Element with ID', elId, 'is on the page:', elPage);
})
}
scrollToRowExpanded(el) {
//If the action is a display, scroll
if (el.value) {
//It takes a while for vuetifiy to add the row and expanded classes
setTimeout(() => {
const selectedRow = document.querySelector(
'.v-data-table__expanded__content'
).previousElementSibling
const tableHeader = document.querySelector('.v-data-table-header')
.clientHeight
const barToScroll = document.querySelector(
'#entities__table .v-data-table__wrapper'
)
selectedRow.scrollIntoView()
barToScroll.scrollBy({
top: -tableHeader,
behaviour: 'smooth'
})
}, 10)
}
},
This previously worked but only if the element is on page 1, so I had to implement new logic