In my Vue application, I received an API response containing information about various products:
productData = [{
"id": 4,
"name": "product02",
"image": "https://example.com/images/example.png",
"variations": [{
"id": 1,
"price": "10.00",
"stock": 0,
"color": "white",
"sex": "male",
"size": "42"
}, {
"id": 2,
"price": "10.00",
"stock": 0,
"color": "white",
"sex": "male",
"size": "39"
}, {
"id": 3,
"price": "10.00",
"stock": 0,
"color": "white",
"sex": "male",
"size": "39"
}]
}, {
"id": 5,
"name": "product",
"image": "https://api.pre.runrunsports.com/api/imagees_productos/figura1_8.png",
"variations": [{
"id": 33,
"price": "10.00",
"stock": 0,
"size": "41",
"sex": "male",
"color": "white"
}, {
"id": 34,
"price": "10.00",
"stock": 0,
"size": "41",
"sex": "male",
"color": "blue"
}, {
"id": 35,
"price": "10.00",
"stock": 0,
"size": "41",
"sex": "male",
"color": "black"
}, {
"id": 36,
"price": "10.00",
"stock": 0,
"size": "41",
"sex": "male",
"color": "red"
}]
}]
I'm facing an issue with extracting unique values for attributes like size, color, and sex for each product to populate a <select>. Additionally, I need to dynamically retrieve the corresponding price based on user selections of sex, color, and size.
At this stage, I'm stuck with the following simplified code:
new Vue({
el: '#list-example',
data: {
productData: [{
id: 4,
name: "product02",
image: "https://example.com/images/example.png",
attributes: {
"color": "Color",
"sex": "Sex",
"size": "Size"
},
variations: [{
id: 1,
price: "10.00",
stock: 0,
color: "white",
sex: "male",
size: "42"
},
{
id: 2,
price: "10.00",
stock: 0,
color: "white",
sex: "male",
size: "39"
}, {
id: 3,
price: "10.00",
stock: 0,
color: "white",
sex: "male",
size: "39"
}
]
}, {
id: 5,
name: "product",
image: "https://example.com/images/example.png",
attributes: {
"color": "Color",
"sex": "Sex",
"size": "Size"
},
variations: [{
id: 33,
price: "10.00",
stock: 0,
size: "41",
sex: "male",
color: "white"
}, {
id: 34,
price: "10.00",
stock: 0,
size: "41",
sex: "male",
color: "blue"
}, {
id: 35,
price: "10.00",
stock: 0,
size: "41",
sex: "male",
color: "black"
}]
}],
},
methods: {
}
})ul {
list-style: none;
}
span.title {
font-size: 20px;
margin-bottom: 20px;
}
.price {
font-size: 30px;
color: red;
}
select {
max-width: 80px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="list-example">
<ul>
<li v-for="(product, index) in productData" v-bind:key="product.id">
<span class="title">{{product.name}}</span>
<div class="form-group valid col-12 field-select" v-for="(attribute, index) in product.attributes" :key="`attribute-${index}`">
<label v-bind:for="index + product.id"><span>Select {{ attribute }}</span>
</label>
<div class="field-wrap">
<select v-bind:id="index + product.id" class="form-control">
<option v-for="variation in product.variations" :key="variation.id">
{{ variation }}
</option>
</select>
</div>
</div>
<span class="price">
50€
</span>
<p>(get the price dynamically depending on user selection)</p>
</li>
</ul>
</div>Any assistance on how to tackle this would be greatly appreciated. Thank you for your time!