Filter product by checkbox vue js

Question

i am trying to implement checkbox filter with vue js in laravel but its not working as expected. For first checkbox All , it works and show/hide all products when i check and uncheck checkbox. But for Tech,Entertainment and Fictional its not filtering product based on checkbox clicked.

<template>
    <div class="container">
        <div class="row ">
            <div class="col-md-4">
                <div class="filter">
                    <label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label>
                    <label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label>
                </div>

    </div>
            </div>
            <div class="col-md-8">
                <div class="card" v-for="product in filteredProduct">
                    <div class="card-header">{{product. name}}</div>

                    <div class="card-body">
                        <img :src="product.image">
                        <p>{{product.price}}</p>
                        <p>{{product.category_id}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        data:function(){
            return {
                products:[],
                selectedCategory: ["0"],

            }

        },
        computed: {
        filteredProduct: function() {
        var app = this;
        var category = app.selectedCategory;
        console.log(category)

        if(category.includes("0")) {
            return app.products;
        } else {

            return app.products.filter(function(p) {

            return category.includes(p.category_id);
        });

            }
        }
    },
        mounted() {
            console.log('Product mounted.')
            var app = this;
            axios.get('/products')
                .then(function (resp) {
                    app.products = resp.data;
                })
                .catch(function (resp) {
                    console.log(resp);
                    alert("Could not load");
                });
        }
    }
</script>

any help would be appreciated

Answer 1

My guess is category_id in products array is of type number . But, selectedCategory array has numbers in string format. includes uses Strict equality to check if the provided value exists in the array or not. This is why it works for "0" because it is provided as a string. If you change it to p.category_id.toString() , it will work:

Here's a working snippet:

 new Vue({ el: '#app', data: function() { return { products: [{ category_id: 1, name: "Tech 1" }, { category_id: 1,name: "Tech 2"},{ category_id: 2, name: "Entertainment 1" },{ category_id: 3, name: "Fictional 1" }], selectedCategory: ["0"], } }, computed: { filteredProduct: function() { const app = this, category = app.selectedCategory; if (category.includes("0")) return app.products; else return app.products.filter(p => category.includes(p.category_id.toString()) ); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="container" id="app"> <div class="row "> <div class="col-md-4"> <div class="filter"> <label><input type="checkbox" v-model="selectedCategory" value="0" /> All</label> <label><input type="checkbox" v-model="selectedCategory" value="1" /> Tech</label> <label><input type="checkbox" v-model="selectedCategory" value="2" /> Entertainment</label> <label><input type="checkbox" v-model="selectedCategory" value="3" /> Fictional</label> </div> </div> </div> <div class="col-md-8"> <div class="card" v-for="product in filteredProduct"> <div class="card-header">{{product. name}}</div> </div> </div> </div>