Norbertho
191
1
Vue

Flitering in VUE.JS with select buttons

Posted 3 months ago by Norbertho

Hi, I have a vue component. I have products collection in this vue componenet. I would like to filter this collection with select buttons. These products are food products and as default i would like to show all products but if I select the lactosefree button the i would like to show only products are lactosefree. In my database these options true or false. so for example if I have a cheese that lactose free then in the database i have a field lactosefree with value 1.

my vue component

<template>
                <div class="col-9 col-xl-10 row justify-content-start allproduct">
                <div class="col-12 titlebg">
                    <h1 class="text-center mb-5">Összes Termék</h1>
                </div>
                <div class="col-12">
                    <div class="col-12" style="font-size: 16px; margin-bottom: 5px;">Szűrés termékjellemzők alapján:</div> 
                    <div class="col-12 justify-content-between row filterbtn">
                        <label class="btn btn-primary">
                            <input v-model="selected" value="gluteinfree" type="checkbox"  class="check2">GLUTEIN FREE
                        </label>
                
                        <label class="btn btn-primary">
                            <input v-model="selected" value="lactosefree" type="checkbox"  class="check2">LAKTOZ FREE
                        </label>
                        
                        <label class="btn btn-primary">
                            <input v-model="selected" value="vegan" type="checkbox"  class="check2">VEGAN
                        </label>
                        <label class="btn btn-primary">
                            <input v-model="selected" value="eggfree" type="checkbox"  class="check2">EGG FREE
                        </label>
                    </div>
                </div>
    <div class="col-12 mt-5">
                    <div v-for="product in this.products" class="normal justify-content-center row col-md-3 mb-5">
                    <a :href="'products/'+ product.id +'/'+product.slug_title">
                        <div class="normal-image col-12" style="max-width: 160px; display: block; margin-left: auto; margin-right: auto;">
                            <img :src="'/images/'+product.productImage" id="fimg" >
                        </div>
                        <div class="normal-info col-12" style="text-align:center;">
                            <h5>{{product.productName}}</h5>
                            <p>{{product.productPrice}} Ft</p>
                            <button class="btn" id="fbtn">
                                Megnézem
                            </button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
</template>


<script>
    export default{
        data(){
            return{
            products: 
[ 
{ "id": 1, "slug": "majomkenyerfa-kivonat", "productName": "Majomkenyérfa kivonat", "productImage": "15525838740_vitamin.png", "productPrice": "1700", "gluteinfree": false, "eggfree": true, "lactosefree": false, "vegan": false, "featured": 1, "created_at": "2019-03-14 17:05:17", "updated_at": "2019-03-14 17:05:17" }, 
{ "id": 2, "slug": "kokuszolaj", "productName": "Kókuszolaj", "productImage": "1552583.png", "productPrice": "1700", "gluteinfree": true, "eggfree": false, "lactosefree": false, "vegan": true, "featured": 1, "created_at": "2019-03-14 17:08:55", "updated_at": "2019-03-14 17:08:55" }, 
{ "id": 3, "slug": "c-vitamin-80mg", "productName": "C-vitamin 80mg", "productImage": "1540_vitamin.png", "productPrice": "1700","gluteinfree": true, "eggfree": true, "lactosefree": true, "vegan": false, "featured": 0, "created_at": "2019-03-14 17:10:11", "updated_at": "2019-03-14 17:10:11" }, 
{ "id": 4, "slug": "valami-ize", "productName": "Valami izé", "productImage": "155_2013_400x.png", "productPrice": "1740","gluteinfree": false, "eggfree": false, "lactosefree": false, "vegan": true, "featured": 0, "created_at": "2019-03-14 17:11:02", "updated_at": "2019-03-14 17:11:02" } 
],
             selected: [],
            }   
        },
         computed: {
         },
    }
</script>

I guess somehow i should filter the array in a computed property and return the filtered array.

Please sign in or create an account to participate in this conversation.