Вложенные циклы в таблице с элементом шаблона дают ошибку памяти - PullRequest
Новая
       12

Вложенные циклы в таблице с элементом шаблона дают ошибку памяти

0 голосов
/ 15 марта 2019

У меня есть 4-сторонний вложенный цикл: Years > months > types > consultants.

Я получаю эту ошибку:

RangeError: Превышен максимальный размер стека вызовов

Я пытался использовать только ключи (короткая версия) , чтобы сделать минимально возможную рабочую вещь, так что теперь вы видите без значений из вложенных циклов.

  • 4-сторонний вложенный цикл в таблице: Ошибка
  • 3-сторонний вложенный цикл в таблице: Работает
  • 4путь вложенного цикла в неупорядоченном списке: Работает

Есть ли ограничение, что вы не можете использовать более 3 раз элемент шаблона в таблице?

Моя таблица (короткая версия): 

<table>
  <thead>
    <tr>
      <td>head</td>
    </tr>
  </thead>
  <tbody>
    <template v-for="(years, y) in stats">
      <tr :key="y">
        <td>{{ y }}</td>
      </tr>
      <template v-for="(months, m) in years">
        <tr v-if="m !== 'total'" :key="y + m">
          <td>{{ m }}</td>
        </tr>
        <template v-for="(types, t) in months">
          <tr v-if="t !== 'total'" :key="y + m + t">
            <td>{{ t }}</td>
          </tr>
          <template v-for="(consultants, c) in types">
            <tr v-if="c !== 'total'" :key="y + m + t + c">
              <td>{{ c }}</td>
            </tr>
          </template>
        </template>
      </template>
    </template>
  </tbody>
</table>

Мой неупорядоченный список (короткая версия): 

<ul v-for="(years, y) in stats" :key="y">
  <li>
    {{ y }}
    <ul v-for="(months, m) in years" :key="y + m">
      <li v-if="m !== 'total'">
        {{ m }}
        <ul v-for="(types, t) in months" :key="y + m + t">
          <li v-if="t !== 'total'">
            {{ t }}
            <ul v-for="(consultants, c) in types" :key="y + m + t + c">
              <li v-if="c !== 'total'">{{ c }}</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Создание вложенных циклов: 

const customer = await this.$http.get(`/api/customer/${customer_id}`)
this.stats = {}

customer.data.forEach(invoice => {
  const year = invoice.year
  const month = invoice.monthname
  const type = invoice.consultant_type
  const consultant = invoice.consultant

  const sales = invoice.sales
  const purchase = invoice.purchase
  const grossMargin = invoice.gross_margin

  // group by year
  if (year in this.stats) {
    this.stats[year].total.sales += sales
    this.stats[year].total.purchase += purchase
    this.stats[year].total.grossMargin += grossMargin
  } else {
    this.stats[year] = {
      total: {
        sales: sales,
        purchase: purchase,
        grossMargin: grossMargin,
      }
    }
  }

  // group by month
  if (month in this.stats[year]) {
    this.stats[year][month].total.sales += sales
    this.stats[year][month].total.purchase += purchase
    this.stats[year][month].total.grossMargin += grossMargin
  } else {
    this.stats[year][month] = {
      total: {
        sales: sales,
        purchase: purchase,
        grossMargin: grossMargin,
      }
    }
  }

  // group by type
  if (type in this.stats[year][month]) {
    this.stats[year][month][type].total.sales += sales
    this.stats[year][month][type].total.purchase += purchase
    this.stats[year][month][type].total.grossMargin += grossMargin
  } else {
    this.stats[year][month][type] = {
      total: {
        sales: sales,
        purchase: purchase,
        grossMargin: grossMargin,
      }
    }
  }

  // group by consultants
  if (consultant in this.stats[year][month]) {
    this.stats[year][month][type][consultant].sales += sales
    this.stats[year][month][type][consultant].purchase += purchase
    this.stats[year][month][type][consultant].grossMargin += grossMargin
  } else {
    this.stats[year][month][type][consultant] = {
      sales: sales,
      purchase: purchase,
      grossMargin: grossMargin,
    }
  }
})
...