#javascript #vue.js
Вопрос:
Я пытаюсь понять, почему мои результаты дублируются в моем коде 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> Ответ №1:
Похоже, вы дважды повторяете все возможные местоположения,
Однажды здесь:
<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')">
Следовательно, они перечислены дважды.
Вам нужно будет отфильтровать внутреннюю итерацию местоположений по местоположению, которое вы в настоящее время повторяете во внешней.
Например, условие внутреннего цикла теперь включает amp;amp; 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 amp;amp; 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>
Я думаю, что это должно решить вашу непосредственную проблему, хотя в принципе сложность этого кода слишком высока, чтобы легко рассуждать об этом, и, вероятно, выиграет от рефакторинга.
Комментарии:
1. Спасибо, это сработало. Это определенно не самая лучшая логика, но это связано с тем, что используются и сравниваются два разных источника данных, пока мы не соберем их в одном источнике