Filter list with Vue.js

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

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

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