嵌套的 v-for 循环和不正确的数据放置答案

【问题标题】：Nested v-for loops and incorrect data placement嵌套的 v-for 循环和不正确的数据放置
【发布时间】：2025-12-18 11:20:02
【问题描述】：

我从后端 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>

【问题讨论】：

数组索引不应该用作 :key 值，因为你不能保证它是唯一的并且总是与一个特定的项目相关联。至于您的数据，您必须创建一个计算属性来深度过滤您的数据数组并将适当的子数组移动到正确的对象。
谢谢。希望有人可以帮助我使用深层过滤器
您尝试过哪些数据重构？
您的问题与 vue 无关 - 修复 fetch（或您正在使用的任何 API）回调中的数据集，而不是模板
如果你想在前端“修复”这个问题，只需使用返回正确排序结构的计算属性，并在模板中引用该计算属性而不是 eg

标签： javascript sorting vue.js vuejs2

【解决方案1】：

您可以按如下方式对文本标题节点进行排序：

展平节点 - 取消对所有节点的分组，使它们都处于相同的深度，便于排序
排序节点 - 按类型和标题编号对节点进行排序
分组节点 - 给定一个排序列表，将节点分组到适当的标题下

然后，使用computed property（例如，命名为“egSorted”）返回排序后的输入（eg）：

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

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

在您的模板中，将eg 替换为egSorted。

demo

【讨论】：