Filter is not loading new data / performing an axios request

[FrazeColder]

I am using vue js and the package Vue infinite loading. I have done some customizations e.g. the user has to press a button after the the third infinity load or also how the data are pushed to the products list. This is because I am using Laravel and paginate on the server-side because besides the infinity loading I want to give the user the options to choose a pagination as well.

However, I have followed every single step described in the documentation but the filter is not working for me... Whenever I am changing the filter settings, the products lists gets emptied (how described in the documentation) but the problem is, the infinite loading package is not pulling new data from the server. There is no XMLHttpRequest/axios request being made. I can clearly see this in the network console and I guess this is the problem. But why isn't the infinite loading component not pulling new data?

I will shortly explain my variables in order for you to understand and know what they are for!

products -> my list of products being displayed in the infinity load

infiniteLoadingButton -> either true or false is the "Load more" button is being displayed to the user

infiniteCount -> simply the paginate page to request e.g. &page=1, &page=2...

buttonLimitCounter -> the limit after how many requests the button should be displayed. In my case it's 3, so the user has to confirm to load more products via the "load more" button.

infiniteId -> take a look in the Vue infinite loading docs

order -> one of my filter options

expired -> another filter option

checkedProductTypesCheckboxes -> another filter option.

All three filter options get set by EventBus. The only difference to the example in the documentation is that the data in the documentation get also requested for page 1. In my case I set the data by passing the data to the component. Why I am doing this? -> To reduce the amount of axios requests being made. But I don't think this is the problem. The problem clearly is that the infinity load component is not executing an axios request after the filter has changed!

This is my code. I would appriciate any kind of help!

<template>
    <div>
        <div v-for="(product, $index) in products.data" :key="$index">
            <productListView :key="product.id" :ref="'productListView' + product.id" :productProp="product" :userprop="user" :auth="auth" place="home"></productListView>
        </div>

        <div id="infiniteLoadingButton" v-if="infiniteLoadingButton">
            <button class="btn btn-primary" @click="increaseInfiniteLoadingButtonCount">Load more</button>
        </div>

        <infinite-loading v-if="!infiniteLoadingButton" spinner="waveDots" @infinite="infiniteHandler" :identifier="infiniteId" ref="infiniteLoading"></infinite-loading>
    </div>
</template>

<script>
    import productListView from './ProductListView.vue';
    import InfiniteLoading from 'vue-infinite-loading';
    import { EventBus } from '../app.js';

    export default {
        name: "ProductsManager",
        props: ['route', 'userprop', 'auth', 'productsProp'],
        data() {
            return {
                products: this.productsProp,
                infiniteLoadingButton: false,
                infiniteCount: 1,
                buttonLimitCounter: 3 + (1),
                infiniteId: +new Date(),
                order: 'highlights', //Make it dynamically and load it from ProductsFilter
                expired: false, //Make it dynamically and load it from ProductsFilter
                checkedProductTypesCheckboxes: [1, 2, 3] //Make it dynamically and load it from ProductsFilter
            }
        },
        components: {
            productListView,
            InfiniteLoading
        },
        methods: {
            infiniteHandler($state) {
                if(this.infiniteCount < this.buttonLimitCounter){
                    if(this.infiniteCount < this.products.last_page){
                        this.infiniteCount++;

                        axios.get(this.route, {
                            params: {
                                page: this.infiniteCount,
                                order: this.order,
                                expired: this.expired,
                                checkedProductTypes: JSON.stringify(this.checkedProductTypesCheckboxes)
                            }}).then((r) => {
                                //Save old and new products
                                var old_products = this.products;
                                var response = r.data;

                                //Concat new products with old products
                                old_products = old_products.data;
                                old_products = old_products.concat(response.data);

                                //Set new products and push all products to new products
                                var new_products = response;
                                new_products.data = old_products;

                                //Set products variable
                                this.products = new_products;
                                $state.loaded();
                            }).catch((e) => {
                            $state.error();
                        });
                    }else{
                        $state.complete();
                    }
                }else{
                    this.infiniteLoadingButton = true;
                }
            },
            increaseInfiniteLoadingButtonCount(){
                this.infiniteLoadingButton = false;

                //Amount of next infinity loadings before button is press is needed again!
                this.buttonLimitCounter += 3;
            },
            getFreshData(){
                this.infiniteLoadingButton = false;
                this.infiniteCount = 1;
                this.buttonLimitCounter = 3 + (1);
                this.products = [];
                this.infiniteId += 1;
            }
        },
        computed: {
            user() {
                if(this.userprop !== null) {
                    return this.userprop;
                }

                return false;
            }
        },
        created() {
            EventBus.$on('filter-product-types-update', (data) => {
                this.checkedProductTypesCheckboxes = data;
                this.getFreshData();
            });

            EventBus.$on('filter-order-update', (data) => {
                this.order = data;
                this.getFreshData();
            });

            EventBus.$on('filter-expired-update', (data) => {
                this.expired = data;
                this.getFreshData();
            });
        }
    }
</script>

<style scoped>

</style>