Filter list with Vue.js

Question

I just got started with Vue.js and here is what I'm doing: I am rendering a list of products, and each product has a name, a gender and a size. I'd like users to be able to filter products by gender, by using an input to type the gender.

var vm = new Vue({
      el: '#product_index',
      data: {
        gender: "",
        products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
      },
      methods:{
        updateGender: function(event){
          this.gender = $(event.target).val()
        }
      }
    }
  )

  <div v-for="product in products" v-if="...">
    <p>{{product.name}}<p>
  </div>
  <input v-on:change="updateGender">

I managed to get the gender updated, but I have an issue with the filtering part. When the page loads, I don't want any filtering. In the documentation, they advise to use v-if but it doesn't seem compatible with this configuration.

If I use v-if, I could do:

v-if="product.gender == gender"

But again, this doesn't work when the page load because gender is empty. I couldn't find a workaround for this.

How should I approach this issue ?

Alex · Accepted Answer · 2019-09-03 19:51:57Z

105

Use computed properties - something like this (Example bellow filter items by type)

const app = new Vue({

  el: '#app',

  data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development'},
       {name: 'Game of Thrones', type: 'serie'},
       {name: 'Jon Snow', type: 'actor'}
     ]
  },

  computed: {
    filteredItems() {
      return this.items.filter(item => {
         return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    }
  }

})

Template:

  <div id="app">

    <div v-for="item in filteredItems" >
      <p>{{item.name}}</p>
    </div>

    <input type="text" v-model="search">

  </div>

Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

edited Sep 3, 2019 at 19:51

Alex

69.4k25 gold badges150 silver badges133 bronze badges

answered Jan 22, 2017 at 13:41

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

4 Comments

Leo Over a year ago

This is the right way to go. Also take a look at the official docs vuejs.org/v2/guide/migration.html#Replacing-the-filterBy-Filter

user10753862 Over a year ago

hello, could you please check this question: stackoverflow.com/questions/54415053/…

Bakhtawar Gill Over a year ago

what if we want to search this on "type" as well as "name"?

Belmin Bedak Over a year ago

@BakhtawarGIll in that case you will need to have list of the keys you wanna filter on, and do same for each key.

Nora · Accepted Answer · 2017-01-22 13:53:55Z

4

You can try v-if="!gender || product.gender == gender"

answered Jan 22, 2017 at 13:53

Nora

3,2812 gold badges23 silver badges23 bronze badges

2 Comments

moreirapontocom Over a year ago

Works like a charm! I'm using a simple filter based on a <select> value. Your solution is the best in that case! Thank you.

Sebastian Over a year ago

Be aware that this is against the style guide. Eslint will show a warning if used (see here).

Gufran Hasan · Accepted Answer · 2019-09-19 08:37:08Z

4

Just modified @Nora's answer.

You need to change in the template as:

 <div id="product_index">
    <div v-for="product in products" v-if="!gender || product.gender===gender">
      <p>{{product.name}}<p>
    </div>
    <input v-on:change="updateGender">
  </div>

and in JS file as:

var vm = new Vue({
      el: '#product_index',
      data: {
        gender: "",
        products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
      },
      methods:{
        updateGender: function(event){
          this.gender = event.target.value
        }
      }
    }
  );

Working Demo: https://jsbin.com/qocuraquki/edit?html,js,console,output

edited Sep 19, 2019 at 8:37

answered Sep 19, 2019 at 8:27

Gufran Hasan

9,4297 gold badges44 silver badges57 bronze badges

Comments

Bakhtawar Gill · Accepted Answer · 2019-07-11 06:58:59Z

3

computed: {
        filteredItems() {
          return this.allStartupData.filter(item => {
            let byName =
              item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
            let byDescription =
              item.description.toLowerCase().indexOf(this.search.toLowerCase()) >
              -1;
            if (byName === true) {
              return byName;
            } else if (byDescription === true) {
              return byDescription;
            }
          });
        }
      }

and then u can iterate through filteredItems like e.g

 <v-flex v-for="(obj,index) in filteredItems" :key="index" xs12 md4>

answered Jul 11, 2019 at 6:58

Bakhtawar Gill

4395 silver badges16 bronze badges

Comments

Marko Barleben · Accepted Answer · 2023-02-10 08:23:53Z

0

computed: {
 filteredItems() {
  return myObject.filter((val) => { 
   return val.some((val) => val.toString().toLowerCase().includes(this.searchString))
  })
}}

Iterate over the Object as already described above

edited Feb 10, 2023 at 8:23

answered Feb 10, 2023 at 8:18

Marko Barleben

13 bronze badges

1 Comment

Lajos Arpad Over a year ago

Please add the iteration, as the order of answers will change over time.

Collectives™ on Stack Overflow

Filter list with Vue.js

5 Answers 5

4 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related