This particular issue pertains to the following query: map two 1D arrays into a 2D array and then fill with known values. Essentially, I am working with three sets of data: Colours, Sizes, and Products. These datasets are loaded into the Vue main component using axios to fetch information from an API. Each product in the collection references a color and size object. In my previous inquiry mentioned above, I sought guidance on structuring products into a 2-dimensional array based on colors and sizes (even if not all combinations exist). My current dilemma revolves around managing the application state until it's time to save the changes back to the datastore.
The code snippet below illustrates how products are arranged in the grid within a method of the primary Vue component:
buildDimensions(){
/* create a new array where SKU acts as a key to map them into the grid */
currentSKUs = this.style.skus.reduce((currentSKUs,sku) => currentSKUs.set(sku.sku,sku),new Map);
result = this.style.colours.map(
colourRow => this.style.sizes.map(
sizeColumn => ({
key: this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
value: currentSKUs.get(
this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim()
) || {
colour_code: colourRow.colour_code.trim(),
size_code: sizeColumn.size_code.trim(),
lifecycle: "Not Created",
sku:this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
selected:false
}
})
)
);
this.matrix = [];
this.matrix.push(result);
},
My objective is to generate a new object with a 'selected' property set to false for non-existent products. This functionality appears to be functioning correctly. However, I'm encountering issues with updating the UI when modifying the 'selected' property for existing SKUs. It seems that the getters and setters are not being properly created for this property addition.
I've attempted solutions like:
Vue.set(sku,selected,false)
and
sku = Object.assign({}, sku,{selected:false})
while iterating over the API results before saving them to the data object, but these methods didn't yield the desired outcome.
If anyone can offer insights or suggestions on how to implement the properties while ensuring the appropriate getters and setters are in place, I would greatly appreciate it. It's worth noting that the 'selected' property is purely for UI purposes and should not be persisted in the data store.