javascript - Vue - 复选框全部处理选择的全局编辑 - 对象粘贴

Question

代码笔

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

目标

我正在尝试为客户创建一个动态订购系统。

上传的文件存储为对象数组。然后创建一个表，该表循环遍历这些文件并吐出包含产品的表行。

当用户点击其中一个产品时，它会发出 ajax 请求并获取该产品的所有可用选项。

当复选框全部被选中时，用户应该能够全局编辑所有产品和选项，当取消选中时，它将恢复正常行为。

问题:

当您不使用任何复选框时，v 建模绝对可以完美地工作。你可以看到订单是用其选项构建的。 但是，在使用复选框后，v 模型就粘在一起了，并且选项不再彼此独立。

重现步骤:

• 全部选中复选框(表格头部左上角的复选框)
• 选择产品(第一个产品条目)
• 选择一个选项(第一个产品条目)
• 取消选中所有复选框
• 尝试更改选项，您将看到所有对象的订单对象都在更新。

数据:

我有一个包含产品作为对象的产品数组。

订单数组，这就是问题所在，其中包含文件 key ，然后是产品，然后是与产品关联的选项。

还有一个对象的选项数组，当用户点击选择按钮时，它会更新，它再次包含文件 key ，以便我可以链接它。

全部复选框:

我相信这与我选择产品的方式有关，如下所示:

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 = [];
  }
}

提前非常感谢任何帮助，这是一个棘手的问题!

Answer 1

首先，你错过了:key属性(property) v-for ，因此您的所有行都被视为相同 - 将此行更改为: <tr v-for="(file, fileKey) in files" :key="file">

其次，在循环中，您将相同的产品分配给所有行，这会导致您想要避免的行为:

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