Vue - Checkbox all to handle global editing of selects - Object sticking

Question

Codepen

https://codepen.io/ainsleyclark/pen/yLNqmRq?editors=1011

Objective

I'm trying to create a dynamic ordering system for customers.

Files are uploaded which are stored as an array of objects. A table is then created which loops over those files and spits out table rows containing products.

When a user hits one of those products, it makes an ajax request and gets all available options for that product.

When the checkbox all is hit, the user should be able to edit all products and options globally, and when unselected it reverts back to normal behaviour.

The problem:

The v-modelling works absolutely flawlessly when you are not using any checkboxes. You can see the order being built out with its options. However after you have used the checkboxes, its like the v-modelling is sticking and the options aren't independent of each other any more.

Steps to reproduce:

Hit the checkbox all (top left checkbox in table head)
Select a product (first product entry)
Select an option (first product entry)
Unselect checkbox all
Try and change the options and you will see the order object updating for all objects.

Data:

I have a products array containing products as objects.

A order array, which is where the problem lies, which contains the file key then the product then the options associated with the product.

There is also an options array of objects which gets updated when a user hits the select button, again it contains the file key so I can link it.

Checkbox all:

I believe it has to do with the way Im selecting the product as show 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 help is greatly appreciative in advance, It's been a tough problem!

score 1 · Answer 1 · answered Mar 21 '20 at 17:56

1

First, you missed :key property in v-for, so all yours rows are treated as same - change this line like this: <tr v-for="(file, fileKey) in files" :key="file">

Second, in you loop you are assigning to all rows the same product, and this is leads to behaviour you want to avoid:

    const product = Object.assign({}, this.order['products'][this.getSelectedFile]);
...
    this.selectedFiles.forEach(fileIndex => {
      order['products'][fileIndex] = product || {};
    });

answered Mar 21 '20 at 17:56

Alex Brohshtut

2,050
12
13

Thank you very much for your help @Alex Brohshtut, how do I make sure that I'm not using the same product though? I thought Object.assign was creating a new object. – Ainsley Clark Mar 21 '20 at 18:31
Well... you code is a bit complicated, it is quite hard to understand what you are trying to achieve. Like files and products, are they the same? Probably you want to loop through the products and assign every selected product to order. Instead you are assigning same products to order. Rethink this part. – Alex Brohshtut Mar 21 '20 at 18:37
Yep so each file is associated with a product. When you upload a file, it has its own product, which has its own options. Im not sure how the best way to structure it is. – Ainsley Clark Mar 21 '20 at 18:42
I'd recommend you to separate the concerns here and work with real data - files will probably not be [1,2,3], but something different - and you will need to rewrite your code again. Start small, split application to components - such as table controls, row, select all button, option controls etc. You also don't really need use Object.assign every time, you are not mutating your products anyway. – Alex Brohshtut Mar 21 '20 at 18:48
Here's a much simpler example of the objects sticking without any modelling at all. I just dont understand why its changing all together even after Ive cleared it https://codepen.io/ainsleyclark/pen/RwPYPgZ?editors=1111 Thanks again. – Ainsley Clark Mar 21 '20 at 18:55
Your checkboxAllHandler actually should only enable editing or also add products to order? – Alex Brohshtut Mar 21 '20 at 19:10
It should add the products to the order to send off to the backend. Basically the checkboxes is just a way so the user can edit all of the select boxes at the same time. The reason I cant mutate files it's because they are blobs and I dont really want to change them. I just cant figure out how to copy the product without it referencing the same one. – Ainsley Clark Mar 21 '20 at 19:19