Vuejs Custom Filters Dependent MultiSelect

Vuejs Custom Filters Dependent MultiSelect

In this Post We Will Explain About is Vuejs Custom Filters Dependent MultiSelect With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vuejs – How to Create a Custom Filter – CodeExample

In this post we will show you Best way to implement filter in vuejs example, hear for vuejs custom filter ng-repeatwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

index.html

<select v-model="catlist" multiple>
  <option>home_product</option>
  <option>officeproduct</option>
</select>
<select v-model="color" multiple>
  <option>blue</option>
  <option>yellow</option>
</select>
{{ catlist }}
<ul v-on:click="log">
  <li v-for="product in products | products catlist | colorsearch color">
    {{ product.name | capitalize }} - {{ product.price | currency }}
  </li>
</ul>

index.js

<script>
 Vue.filter('products', function (value, catlist) {
        var result = [];

        if(!catlist){
            return value;
        }

        catlist = catlist
				console.log(catlist);
        result = value.filter(function(product){
            if(catlist.indexOf(product.products) > -1){
                return product;
            }
        })
        return result;
 })
 
  Vue.filter('colorsearch', function (value, color) {
        var result = [];

        if(!color){
            return value;
        }

        color = color;
        console.log(color)
        result = value.filter(function(product){
            if(color.indexOf(product.color) > -1){
                return product;
            }
        })
        return result;
 })

new Vue({
	el: 'body',
  data: {
    catlist: '',
    color: '',
  	products: [
      {name: 'microphone', price: 25, products: 'home_product',  color: 'yellow'},
      {name: 'LED case', price: 15, products: 'officeproduct', color: 'blue'},
      {name: 'screen cleaner', price: 17, products: 'officeproduct',color: 'yellow'},
      {name: 'LED charger', price: 70, products: 'home_product',color: 'blue'},
      {name: 'mouse', price: 40, products: 'home_product'},
      {name: 'earphones', price: 20, products: 'home_product'},
      {name: 'Computer', price: 120, products: 'home_product'}
    ],
  },
  methods: {
  	 log: function () {
     	console.log(this.products.slice("home_product"));
     },
  }
});
</script>

Example

I hope you have Got What is vuejs – How to Create a Custom Filter – Code Example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.