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 >
<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
CodePudding user response:
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>
CodePudding user response:
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
)