Unique Ordering System
Main Goal
The main objective is to develop a dynamic ordering system that caters to customer needs.
This involves uploading files, storing them as an array of objects, and generating a table with product details from those files.
When a user selects a product, an ajax request is made to retrieve all available options for that specific product.
If the "all" checkbox is enabled, the user should have the ability to modify all products and their options globally. Deselecting it will revert back to normal behavior.
The Challenge:
The v-model functionality works perfectly until checkboxes are involved. It seems like once checkboxes are used, the v-modelling sticks, and the options lose their independence.
Steps to Replicate:
- Click on the "all" checkbox (found at the top left corner)
- Select a product (first entry in the product list)
- Choose an option (from the first product entry)
- Deselect the "all" checkbox
- Try modifying the options and observe how the order object updates for all items.
Data Overview:
There is a products array consisting of product objects.
An order array holds file keys along with associated product options—this is where the issue lies
Additionally, there's an options array that gets updated upon selecting a button, linking it to the respective file key.
"All" Checkbox Concerns:
The problem might stem from the method of product selection implemented as shown below:
checkboxAllHandler(checked) {
if (checked) {
this.files.forEach((file, index) => {
this.selectedFiles.push(index)
});
const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
console.log(product);
const order = Object.assign({}, this.order);
this.selectedFiles.forEach(fileIndex => {
order['products'][fileIndex] = product || {};
});
this.order = {};
this.order = order;
} else {
this.selectedFiles = [];
}
}
Any assistance provided in resolving this challenging issue would be greatly appreciated in advance. Thank you!