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!

Alex Brohshtut Alex Brohshtut · Accepted Answer · 2020-03-21T17:56:54

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 || {};
    });