Load event does not fire at all.

[Catalinul95]

Version 2.4.5

Vue.js version 2.6.12

 <!-- rest of code here -->
<infinite-loading :distance="1" @infinite="infiniteHandler"></infinite-loading>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

export default {
    name: "Index",
    components: {
        InfiniteLoading,
    },
    data() {
        return {
            list: [],
            page: 1,
        }
    },
    methods: {
        infiniteHandler($state) {
            console.log("DOES NOT WORK");
            axios.get('/api/products?page='+this.page)
                .then(response => {
                    return response.json();
                }).then(data => {
                    $.each(data.data, (key, value)=> {
                        this.list.push(value);
                    });
                $state.loaded();
                this.page = this.page + 1;
            });
        },
        formatCurrency(amount) {
            amount = (amount / 100);
            return amount.toLocaleString("ro-RO", {style: 'currency', currency: 'RON'});
        }
    },
    created() {
        axios.get('/api/products?page='+this.page)
            .then(data => {
            this.list = data.data.data;
            this.page = this.page + 1;
        });
    }
}
</script>

What is actually happening?

That console.log("DOES NOT WORK"); is not being called which means that the infiniteHandler() method is not being called at all, everything else works, the, the data is fetched when created() is fired up. No errors, nothing. Even if I remove the created() code, still does not work, the infiniteHandler() method is not being called at all.

[rpankaj]

@Catalinul95 Have you solved it. then how? I'm facing the same problem

[Catalinul95]

Check this here: https://github.com/Catalinul95/power/blob/main/resources/js/routes/Product/Products.vue

I don't remember now, but there you have the code that does the magic, it's working.