how to filter a specific object in vue js

xander 0
Viewed 50

for example if i click on jackets i get the products under jackets, how do i not show any product if i click on both jacket and xl, cause the json object m getting doesn't have "xl" in sizes which has jacket in it

this is my template

<div id="app">
  <div class="pt-2 font-weight-bold ">
              <input
                v-model="checked"
                type="checkbox"
                id=""
                value="jackets"
              >
               <input
                v-model="checked"
                type="checkbox"
                id=""
                value="xl"
              >

            </div>
</div>

this is my script

new Vue({
  el: '#app',
  data: {
    product: {
      {
    "_id": "6316f215fd9c107baa1bc160",   
    "title": "Denim Jacket",
    "type": "Jackets",
    "brand": "next",
    "size": "l",
    "description": "clean suede  jacket ",
    "price": 84,
    "stockQuantity": 1,  
},
{
    "_id": "631a90d3fd9c107baa1bc716",
    
    "title": "Printed sweat-shirt",
    "type": "dresses",
    "brand": "nike",
    "size": "xl",
    "price": 200,
    "stockQuantity": 3,
    "__v": 0,
    "id": "631a90d3fd9c107baa1bc716"
}
    }
  }
  computed: {
    ...mapGetters(["isLoggedIn"]),
    computedProducts() {
      let tempRecipes = this.products;
      if (this.checked.length === 0) {
        return tempRecipes;
      } else {
        return tempRecipes.filter(
          product =>
            this.checked.indexOf(product.type) !== -1 ||
            this.checked.indexOf(product.brand) !== -1 ||
            this.checked.indexOf(product.size) !== -1
        );
      }
    }
  },
})

please how can i go about this

vue.js javascript
2 Answers

Few observations :

  • Your product object is not valid. It should be an array of objects.
  • v-model property variable should be unique for each category (type, size, etc..) to create the differences and logic.
  • while comparing convert the product type value into lowercase.
  • You have to make the conditions dynamic based on the selection (You can take the reference from the below demo).

Suggestion :

  • For type selection you can use select dropdown or list instead of checkbox as at a time user will be able to select one dress type.
  • For size checkboxes are fine as user can select multiple sizes at a time against a dress type.

Live Demo :

new Vue({
  el: '#app',
  data: {
    product: [
      {
        "_id": "6316f215fd9c107baa1bc160",   
        "title": "Denim Jacket",
        "type": "Jackets",
        "brand": "next",
        "size": "l",
        "description": "clean suede  jacket ",
        "price": 84,
        "stockQuantity": 1,  
      },
      {
        "_id": "631a90d3fd9c107baa1bc716",

        "title": "Printed sweat-shirt",
        "type": "dresses",
        "brand": "nike",
        "size": "xl",
        "price": 200,
        "stockQuantity": 3,
        "__v": 0,
        "id": "631a90d3fd9c107baa1bc716"
      }
    ],
    typeSelected: '',
    sizeChecked: [],
  },
  computed: {
    computedProducts() {
      if (!this.typeSelected && !this.sizeChecked.length) {
        return this.product;
      } else {
        return this.product.filter(obj => {
          if (this.typeSelected && !this.sizeChecked.length) {
            return this.typeSelected === obj.type.toLowerCase()
          } else if (!this.typeSelected && this.sizeChecked.length) {
            return this.sizeChecked.includes(obj.size)
          } else {
            return this.typeSelected === obj.type.toLowerCase() && this.sizeChecked.includes(obj.size)
          }
        });
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="typeSelected">
    <option value="">Select Type</option>
    <option value="jackets">Jackets</option>
  </select>
  <input
       v-model="sizeChecked"
       type="checkbox"
       value="l"
       /><label>L</label>
  <input
         v-model="sizeChecked"
         type="checkbox"
         value="xl"
         /><label>XL</label>
  <pre>{{ computedProducts }}</pre>
</div>

Rohìt Jíndal0

I don't think you want to be using checked.indexOf() as it will pick up strays. For example, when the checked value is set to "L" it will still return "XL" as well since it has "L" within it.

A better solution may be

tempRecipes.filter(
          product =>
            checked === this.product.type ||
            checked === this.product.brand ||
            checked === this.product.size
        
       )

Also maybe you should have different variables for each product property. ie one for size, type, and brand. That way you're not overriding the same checked variable when you check something else. Something like below

tempRecipes.filter(
          product =>
            typeChecked === this.product.type ||
            branchChecked === this.product.brand ||
            sizeChecked === this.product.size
        
       )
Marcus0
Related