Situation: I am currently developing an infinite scroll feature on a website. The goal is to load more rows in a table when the bottom of the table reaches the bottom of the viewport from outside of it.
Implementation: To achieve this, I first declared a 'windowHeight' variable in the data section. In the created lifecycle hook, I initialized this variable with 'window.innerHeight' and added a resize event listener on the window object to update the 'windowHeight' variable whenever the window is resized. Here's the code snippet:
data() {
return {
windowHeight: 0,
}
}
created() {
this.windowHeight = window.innerHeight;
window.addEventListener('resize', () => {
this.windowHeight = window.innerHeight
})
}
Next, I defined a variable called 'topRect' and set it equal to the top position of a div element placed right after the table in the template. When the top position of that element is less than the window inner height, a method should be triggered to load more data. This part of the implementation looks like this:
Code Snippet:
data() {
return {
windowHeight: 0,
topRect: 0,
divAfterTable: '',
}
}
created() {
this.windowHeight = window.innerHeight;
window.addEventListener('resize', () => {
this.windowHeight = window.innerHeight
})
}
mounted() {
this.divAfterTable = document.querySelector(#div-after-table)
this.topRect = this.divAfterTable.getBoundingClientRect().top;
window.addEventListener('scroll', this.setClientRect)
})
}
methods: {
setClientRects() {
this.topRect = this.divAfterTable.getBoundingClientRect().top;
}
}
Template:
<template>
<div class="table">
<div class="table__container">
<table class="table__fixture">
<thead>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</thead>
<tbody>
<tr v-if="tableData.data" v-for="row in tableData" :key="row.id">
<td>{{row.colOne}}</td>
<td>{{row.colTwo}}</td>
<td>{{row.colThree}}</td>
</tr>
</tbody>
</table>
</div>
<div id="div-after-table"></div>
</div>
</template>
The remaining parts of the code related to this feature are not mentioned here.
Expectation:
The 'setClientRect' method should trigger on scroll events and update the 'topRect' variable accordingly. However, it seems to only work when the window is resized. Interestingly, adding a console.log('it works') inside the 'setClientRects' method confirms that the method is being called, but the rest of the method does not function unless the window is resized.
Unusual Behavior and Pertinent Information:
I have a somewhat complex component structure in my project where I need to apply this functionality to two different components. Strangely enough, the feature works perfectly on one component but fails on another. The problematic component is nested within multiple router-views - a child route structure. Here is an overview:
<Root>
<App>
<Navbar>
<News> router-view: /news <-- FUNCTIONING HERE
<Root>
<App>
<Navbar>
<League> router-view: /league
<Statistics> router-view /league/statistics <-- NOT WORKING HERE
If you require additional information, please let me know.