How to filter an array in Vue.js with multiple select buttons?

Question

I try to filter an object of array in Vue.js. have products collection in this vue component. 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 true.

I have tried to filter the array with computed property but I don't really know how to do it.

<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>
</div>

<script>
    export default{
        data(){
            return{
                products: [ 
                    { "id": 1, "productName": "Majomkenyérfa kivonat", "gluteinfree": true,  "lactosefree": false, }, 
                    { "id": 2, "productName": "Kókuszolaj", "gluteinfree": false, "lactosefree": true,}, 
                    { "id": 3, "productName": "C-vitamin 80mg", "gluteinfree": true, "lactosefree": true, }, 
                ],
                selected: [],
            }   
        },

        computed: {
            //
        },
    }
</script>

As default I would like to show all the products. but when i click the gluteinfree select button I would like to show only the First and the last products where the gluteinfree is true.

Daniel · Accepted Answer · 2019-04-02 15:05:33Z

4

Here is the code you can use for your computed. This will loop over all the products and compare each against a list of selected options

return this.products.filter(product => this.selected.every(selection => product[selection] === true));

note that it's using filter and every which for old browsers may require polyfills. You can can also convert to a more verbose for loop though.

Code:

new Vue({
  el: '#app',
  data() {
    return {
      products: [{
          "id": 1,
          "productName": "Majomkenyérfa kivonat",
          "gluteinfree": true,
          "lactosefree": false,
        },
        {
          "id": 2,
          "productName": "Kókuszolaj",
          "gluteinfree": false,
          "lactosefree": true,
        },
        {
          "id": 3,
          "productName": "C-vitamin 80mg",
          "gluteinfree": true,
          "lactosefree": true,
        },
      ],
      selected: [],
    }
  },
  computed: {
    zsir() {
      return this.products.filter(prod => this.selected.every(sel => prod[sel] === true));
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <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>
  </div>
  <ul>
    <li v-for="prod in zsir" :key="prod.id">{{prod.productName}}</li>
  </ul>
</div>

edited Apr 2, 2019 at 15:05

answered Apr 2, 2019 at 14:53

Daniel

36k17 gold badges115 silver badges163 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Flink Over a year ago

Ah you beat me to it. Great answer.

Steve O Over a year ago

Good stuff. Only thing I'd change: though you gain a little code brevity using vars like p and s always worth making an example like this as readable as poss. Especially when explaining what your code does to someone else ;)

Norbertho Over a year ago

Anyone know resources where I can learn more about filtering in computed properties? The code is working perfectly but not 100% clear how it is working so i would like to learn about it.

Daniel Over a year ago

You can googleize functional array js lots of resources on youtube for that too. here's a link that builds the loop equivalents for filter and some other functions (every is not included though) scotch.io/tutorials/…

Daniel Over a year ago

I just remembered too, Sara Drasner has this handy tool on codepen codepen.io/sdras/details/gogVRX

Collectives™ on Stack Overflow

How to filter an array in Vue.js with multiple select buttons?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related