Hey there! I am looking to display data after implementing infinite loading. The data is sent asynchronously using asyncData to the page with an ID.
Page
<script>
export default {
async asyncData({ $axios, store }) {
const customerId = store.getters['user/auth/customerId']
if (!customerId) {
return
}
const products = await customerApi.getProducts(
{ $axios },
customerId,
this.page
)
return {
products,
}
},
data() {
return {
page: 1,
}
},
}
</script>
I have the initial data for the first page. The 'products' are passed as props to my template. In the template, I have implemented infinite loading functionality.
template
<template>
<generic-button v-if="!viewMore" inline @click="viewMore = true">
see more
</generic-button>
<client-only v-else>
<infinite-loading
:distance="800"
force-use-infinite-wrapper
@infinite="infiniteHandler"
></infinite-loading>
</client-only>
</template>
<script>
export default {
components: {
InfiniteLoading: () =>
process.client
? import('vue-infinite-loading')
: Promise.resolve({ render: (h) => h('div') }),
},
props: {
products: {
type: Array,
required: true,
},
},
data() {
return {
page: 1,
}
},
methods: {
infiniteHandler($state) {
// This method will retrieve new data when pagination changes
},
},
}
</script>
I want to trigger a new asyncData request with an incremented page parameter and display the updated data every time the pagination is initiated.
Thank you!