I need help solving a Javascript issue I'm facing. I'm working on an e-commerce project built in Vue, and I want to implement the selection of product variants on the client-side. The data format being sent to the backend looks like this:
{
"options": [
{
"key": "Size",
"value": "L"
},
{
"key": "Color",
"value": "Green"
}
]
}
The backend responds with the price of the selected options, and the product ID is retrieved from the URL. To capture the selected options on the frontend, I am using the following code snippet:
getVariationPrice(id, attr, value){
this.variation.options.push({
key: attr,
value: value
});
In this function, 'id' represents the product ID taken from the URL.
To display the attributes for each product, I have implemented the markup as follows:
<span v-for="(attributes, index) in product.attributes" :key="index">
{{ attributes.key }}
<v-chip-group active-class="deep-purple accent-4 white--text" column>
<span v-for="(values, vIndex) in attributes.values" :key="vIndex">
<v-chip @click="getVariationPrice(product.id, attributes.key, values)">{{ values }}</v-chip>
</span>
</v-chip-group>
</span>
The issue arises when selecting values, causing them to be appended to the array incorrectly. I'm looking for a way to make these values replaceable, considering that the backend may return different attribute keys and values, not limited to just size and color. The backend must only return the selected keys and values.
PS: Keep in mind that the backend may provide a variety of attributes, and it will verify each given value before searching for the product. The returned data should include only the selected keys and values.