我試圖弄清楚為什么我的結果在我的 vue 代碼中被復制
基本上，我只是從一個物件中獲取數字（它顯示給定日期倉庫中生產的產品數量），然后將這些結果與另一個物件（顯示每天允許生產的產品數量）進行比較
我是根據比較進行顏色編碼，但問題是我每天會得到每個倉庫的多個結果，而我應該每個倉庫只得到一個結果，如下所示：
2021-11-13 | 2021-11-14 | 2021-11-15
----------------------------------------------------------------
Warehouse 1: 200 Warehouse 1: 200 Warehouse 1: 200
Warehouse 3: 10000 Warehouse 3: 10000 Warehouse 3: 10000
為什么我每天都會收到每個倉庫的多個條目？
const warehouseNest = (rows) =>
rows .reduce(
(b,row) => {
const warehouseIndex = b [row .warehouse] || (b [row .warehouse] = {dates: {}})
const date = warehouseIndex .dates [row .date] || (warehouseIndex .dates [row .date] = {qty_for_date: 0})
date.qty_for_date = row.qty
return b
},
{}
);
var vm =
new Vue({
el: "#app",
data: {
rows:[
{
date: "2021-11-09",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-10",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-11",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-12",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-13",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-14",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-15",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-16",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-17",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-18",
qty: 37,
warehouse: "1"
},
{
date: "2021-11-09",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-10",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-11",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-12",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-13",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-14",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-15",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-16",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-17",
qty: 37,
warehouse: "3"
},
{
date: "2021-11-18",
qty: 37,
warehouse: "3"
}
],
available:[
{
"location":"1",
"date":"2021-11-09",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-10",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-11",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-12",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-13",
"product_avail":"10000"
},
{
"location":"1",
"date":"2021-11-14",
"product_avail":"10000"
},
{
"location":"1",
"date":"2021-11-15",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-16",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-17",
"product_avail":"200"
},
{
"location":"1",
"date":"2021-11-18",
"product_avail":"200"
},
{
"location":"3",
"date":"2021-11-09",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-10",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-11",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-12",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-13",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-14",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-15",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-16",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-17",
"product_avail":"10000"
},
{
"location":"3",
"date":"2021-11-18",
"product_avail":"10000"
}
]
},
computed: {
dateNumberData(){
dateRows = warehouseNest(this.rows)
return dateRows
},
dates() {
return Array.from(Array(11), (_, i) => new Date(Date.now() i * 86400000).toISOString().slice(0,10))
},
activelocation: function() {
return this.available.filter((location) => {
if (this.dates.includes(location.date)) {
return location
}
})
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<th v-for="date in dates" :key="date" >
<div v-for="(value, location) in dateNumberData" :key="location">
<div v-for="(specificValues, dateValue) in value.dates" :key="dateValue">
<div v-if="dateValue == date ">
<div v-for="location in activelocation" v-if="dateValue === location.date" :style="'background: ' (specificValues.qty_for_date > location.product_avail ? '#f7a7a3' : '#a8f0c6')">
<h4 style="display:inline-block; font-weight: bold;">Warehouse {{location.location}}</h4>: {{location.product_avail}}
</div>
</div>
</div>
</div>
</th>
</table>
</div>uj5u.com熱心網友回復：
看起來你要迭代所有可能的位置兩次，
一次在這里：
<div v-for="(value, location) in dateNumberData" :key="location">
然后在這里：
<div v-for="location in activelocation" v-if="dateValue === location.date" :style="'background: ' (specificValues.qty_for_date > location.product_avail ? '#f7a7a3' : '#a8f0c6')">
因此它們被列出兩次。
您需要使用當前在外部迭代的位置來過濾位置的內部迭代。
例如，內回圈條件現在包括&& outerLocation === location.location，并且我已重命名 ，outerLocation因此它不會與location內回圈上的發生沖突。
<div v-for="(value, outerLocation) in dateNumberData" :key="outerLocation">
<div v-for="(specificValues, dateValue) in value.dates" :key="dateValue">
<div v-if="dateValue == date ">
<div v-for="location in activelocation" v-if="dateValue === location.date && outerLocation === location.location" :style="'background: ' (specificValues.qty_for_date > location.product_avail ? '#f7a7a3' : '#a8f0c6')">
<h4 style="display:inline-block; font-weight: bold;">Warehouse {{location.location}}</h4>: {{location.product_avail}}
</div>
</div>
</div>
</div>
我認為這應該可以解決您當前的問題，盡管從根本上講，此代碼的復雜性太高而無法輕松推理，并且可能會從重構中受益。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353946.html
標籤：javascript Vue.js
上一篇：如何顯示影像圖示而不是影像名稱