Hey there, I'm trying to implement a Vue infinite loading feature in my template under certain conditions but for some reason it's not working.
<generic-button v-if="!viewMore" inline no-arrow @click="viewMore = true"
>{{ $t('components.slots.product-list.see-more-favoris') }}
<template #icon-right>
<icon-base width="17" height="10">
<icon-arrow-down color="#ffffff" />
</icon-base>
</template>
</generic-button>
<infinite-loading
v-else
:distance="800"
force-use-infinite-wrapper
@infinite="infiniteHandler"
></infinite-loading>
<script>
export default {
data() {
return {
viewMore: false,
};
},
methods: {
// function test to infinite loading
infiniteHandler($state) {
console.log('hello);
}
}
}
</script>
After clicking the button, the infinite loading component fails to appear and I can't figure out why. Please assist me with this issue. Thank you!