AbstractFilter.vue

<template>
    <div class="filter">
        <h4>{{ translation }}</h4>

        <div class="checkbox" v-for="(value, index) in range" :key="index">
            <label>
                <input type="checkbox" :value="index" v-model.number="values">

                <span class="value">{{ value }}</span>
                <span class="background"></span>

                <span class="remove-filter">
                    <svg-inline name="delete"></svg-inline>
                </span>

                <span class="hotels">{{ count(index) }}</span>

                <div class="spinner" v-show="loading"></div>
            </label>
        </div><!-- /.checkbox -->
    </div><!-- /.filter -->
</template>

<script>
    import { mapGetters } from 'vuex';
    import SvgInline from '../../../svg/SvgInline.vue';

    export default {
        data() {
            return {
                name: '',
                values: [],
                translation: this.trans.search.facilities_filter
            };
        },

        components: {
            SvgInline
        },

        props: {
            range: {
                required: true,
                type: Object
            }
        },

        created() {
            if (!this.name.length) {
                throw new Error(
                    'Please provide a name as a data property for your concrete filter component'
                );
            }

            if (typeof this.filter !== 'function') {
                throw new Error(
                    'Please provide a filter function as a method for your concrete filter component'
                );
            }

            this.$store.commit('addToFilterStack', {
                filter: this.filter,
                name: this.name
            });
        },

        watch: {
            values(values) {
                this.$store.commit('filter', {
                    name: this.name,
                    values
                });
            }
        },

        computed: {
            ...mapGetters([
                'allHotels',
                'filteredHotels',
                'loading',
                'filters'
            ])
        },

        methods: {
            /* eslint-disable */
            count(value) {
                console.log('count');

                // Get the filtered AJAX data.
                let hotels = this.allHotels;

                const filters = Object.entries(this.filters);

                for (let i = 0; i < filters.length; i += 1) {
                    // Get the Object from the array(index 0 being the name).
                    const filter = filters[i][1];

                    // Break the v-model reference by creating a shallow copy.
                    const values = filter.values.slice(0);

                    // Merge any selected checkbox values with the one we are currently iterating.
                    if (!values.includes(value)) values.push(Number(value));

                    // Check if the current filter has selected checkboxes and filter if it does.
                    hotels = filter.function(hotels, values);
                }

                return hotels.length;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .remove-filter {
        display: none;
        fill: white;
    }

    input[type=checkbox]:checked {
        z-index: 1;

        ~ .background {
            background: #87B800;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        ~ .value {
            color: white;
            position: relative;
            z-index: 1;
        }

        ~ .remove-filter {
            display: block;
            float: right;
        }
    }
</style>