Currently, I am utilizing this particular package to implement infinite scrolling in Vue.
In order to continuously add new elements during each scroll, I fetch JSON data from my API server and store it in a data object. Subsequently, I divide the array into groups of four before saving them back to variables. However, the challenge arises when trying to append elements using an event handler method that is unable to access any variable from the computed property. As a newcomer to Vue, I have struggled to find relevant information on this issue. Below is the code snippet:
export default {
name: 'main',
data: () => ({
items: [],
line: []
}),
async created () {
this.items = await fetch('/videos').then(res => res.json())
},
computed: {
columns: function() {
return chunk(this.items, 4)
}
},
methods: {
onInfinite() {
setTimeout(() => {
const temp = []
const len = this.columns.length
for (let i = len + 1; i <= len + 5; i++) {
temp.push(this.columns[i])
console.log(this.columns[i]) //It prints 'undefined'
}
this.list = this.list.concat(temp)
this.$refs.myRefName.$emit('$InfiniteLoading:loaded')
}, 700)
},
},
components: {
InfiniteLoading
}
}