在 Vue 中比较两个不同的数据对象同时减少

Question

我有现有的数据对象和一个由员工循环并进行一些简单数学运算的函数（所有这些目前都在按需要工作）

我需要添加到其中的是允许我的循环在它移动时进行另一次检查。当我在 data_record 对象中移动时，我需要根据 boxes 中的 ID 检查 Data_record 对象中的 ID。如果它们匹配，我需要检查 stock_numbers 与 box_numbers。如果 stock_numbers 大于 box_numbers 那么我想将“不可用”作为一个字符串放入我的计算对象中，以便我可以在我的模板而不是数据中显示它。

我在下面链接了一个沙箱，其中一个文件正在执行下面显示的代码，但文件 main.js 正在尝试匹配条目，以便我可以比较匹配项的数据，但是，它目前只返回第一个没有匹配项的条目

如何正确匹配对象之间的条目并比较这些匹配项的数据，同时仍然执行当前的 reduce 函数？

    <tr v-for="(labels, employee) in numbersByEmployee" :key="employee">
        <td>@{{ employee }}</td>
        <td v-for="date in dates" :key="date">@{{ labels[date] && labels[date].qty * labels[date].labels }}</td>
        <td>@{{ labels.total }}</td>
    </tr>



new Vue({
el: "#app",
data: {
data_record: [
  {
    employee: "Adam",
    ID: "Ac1874/12-15",
    Shelf_Date: "2021-07-14",
    stock_numbers: 100,
    labels: 25
  }
],

boxes: [
  {
    ID: "Ac1874/12-15",
    box_numbers: 50,
    reception_date: "2021-07-20"
  }
],

dates: ["2021-07-14", "2021-07-15"]
},
computed: {
numbersByEmployee() {
  return this.data_record.reduce((r, o) => {
    r[o.employee] ??= {};
    r[o.employee][o.Shelf_Date] ??= {
      stock_numbers: 0,
      labels: 0,
      total: 0
    };
    r[o.employee][o.Shelf_Date].stock_numbers += +o.stock_numbers;
    r[o.employee][o.Shelf_Date].labels += +o.labels;
    r[o.employee].total ??= 0;
    r[o.employee].total += +o.stock_numbers * +o.labels;
    return r;
  }, {});
}
}
});

带有这部分代码的代码沙箱，以及正在进行的匹配工作（main.js 文件是我试图匹配两个对象的地方，但它目前正在显示条目不匹配）

https://codesandbox.io/s/charming-glitter-83nzg?file=/src/main.js

编辑（reduce 函数的输出）

目前，numbersByEmployees 转储

"Adam": { "2021-07-14": { "labels": 5, "stock_numbers": 40, "total": 0 }, "total": 200 }

Answer 1

您可以使用array.prototype.find在方框数组中查找record_data

中当前项目的id

我已经分叉了你的例子来证明这一点。我重命名了一些变量以匹配您在 Whosebug 上的代码。

https://codesandbox.io/s/agitated-diffie-ntmru

如果我可以编辑它以更好地满足您的需要，请告诉我。

在 Vue 中比较两个不同的数据对象同时减少

Comparing two different data objects in Vue while reducing

reduce

vue.js