Вложенные циклы v-for и неправильное размещение данных

Question

Я получил некоторые сложные (уродливые!) Данные из внутреннего API (JSON), и я пытаюсь правильно отобразить их в таблице HTML.В таблице есть упорядоченные элементы списка, которые не находятся в правильных местах.

Например, обратите внимание на скриншот, как элементы 2.1, 2.2 и т. Д. Расположены под 1..Он должен быть перемещен вниз на один слот до соответствующего нумерованного списка.Я понимаю, что данные из API также неверны.Я ищу исправление презентации для этого.

Есть идеи как исправить?

<template>
<div>

  <table>
    <!-- <tr v-if='eg[0].type == "ExREF"'> -->
      <tr>
      <th>General:</th>
      <td>
        <ol><li v-for='(item, index) in eg' v-if='item.type == "ExREF"' :key='index'>{{item["General Considerations Guidance"]}}</li></ol>
      </td>
    </tr>
    <tr>
      <th>Considerations:</th>
      <td>
        <ol>
          <li v-for='(item, index) in eg' v-if='item.type == "Extract"' :key='index'>
            {{item["General Considerations Guidance"]}}
            <ol>
              <li v-for='(a, index) in item.Nodes' :key='index' type='a'>
                <em>{{a.Node}}</em> {{a["General Considerations Guidance"]}}
                  <ol>
                    <li v-for='(i, index) in a.Nodes' :key='index' type='i'>
                      <em>{{i.Node}}</em>{{i["General Considerations Guidance"]}}
                    </li>
                  </ol>
              </li>
            </ol>
          </li>
        </ol>
      </td>
    </tr>
  </table>

</div>
</template>

Answer 1

Вы можете отсортировать узлы с заголовком текста следующим образом:

1. сгладить узлы - разгруппировать все узлы, чтобы они все были на одной глубине, что облегчает сортировку
2. сортировать узлы - сортирует узлы по типу и номеру заголовка
3. группировать узлы - с учетом отсортированного списка группирует узлы под соответствующим заголовком

Затем используйте вычисленное свойство (например, с именем "egSorted"), чтобы вернуть отсортированный ввод (eg):

import { sortNodes } from './tree.js';

export default {
  data() {
    return {
      eg: [...]
    };
  },
  computed: {
    egSorted() {
      return sortNodes(this.eg);
    }
  }
}

И вваш шаблон, замените eg на egSorted.

демо