Javascript 如何克服Vue.js中多个根元素的限制？

希望这里有人能帮我解决这个问题

我有以下数据：

[
{
标题：“标题”，
儿童：[
{
标题：“段落”，
儿童：[]，
},
],
},
{
标题：“容器”，
儿童：[
{
标题：“段落”，
儿童：[]，
},
],
},
]

我想在

列表中呈现如下：

<template>
  <div class="item-content">
    <div
      v-for="(item, index) in indentation"
      :key="index"
      class="item-indentation"
    ></div>
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SortableItemContent',
  props: {
    title: String,
    indentation: Array,
  },
};
</script>

标题
段落
容器
段落

我已经构建了一个递归的组件，这就是我目前所拥有的：

<template>
  <template v-for="(item, index) in tree">
    <div
      class="sortable-item"
      :data-depth="getDepth()"
      :data-index="index"
      :key="getKey(index)"
    >
      {{ item.title }}
    </div>
    <Multi-Level-Sortable
      :tree="item.children"
      :parent-depth="getDepth()"
      :parent-index="index"
      :key="getKey(index + 0.5)"
    ></Multi-Level-Sortable>
  </template>
</template>

<script>
export default {
  name: 'MultiLevelSortable',
  props: {
    tree: {
      type: Array,
      default() {
        return [];
      },
    },
    parentDepth: {
      type: Number,
    },
    parentIndex: {
      type: Number,
    },
  },
  methods: {
    getDepth() {
      return typeof this.parentDepth !== 'undefined' ? this.parentDepth + 1 : 1;
    },
    getKey(index) {
      return typeof this.parentIndex !== 'undefined' ? `${this.parentIndex}.${index}` : `${index}`;
    },
  },
};
</script>

{{item.title}
导出默认值{
名称：“多级可排序”，
道具：{
树：{
类型：数组，
默认值（）{
返回[]；
},
},
父深度：{
类型：数字，
},
父索引：{
类型：数字，
},
},
方法：{
getDepth（）{
返回this.parentDepth的类型！=“未定义”？this.parentDepth+1:1；
},
getKey（索引）{
返回this.parentIndex的类型！='undefined'？`${this.parentIndex}.${index}`:`${index}`；
},
},
};

正如您所看到的，我不仅有一个

作为根元素，还有一个

v-for

，两个“no-no”用于Vue.js。我如何解决这个问题，以呈现如上所述的元素列表

注意：我已经尝试过，并且我能够实现我想要的结构，但是当我尝试使用它时，它不起作用，好像它无法识别任何

.sortable item

元素

---

任何帮助都将不胜感激！谢谢大家!

多亏了@AlexMA，我才能够通过使用一个功能组件来解决我的问题。下面是它的外观：

import SortableItemContent from './SortableItemContent.vue';

export default {
  functional: true,
  props: {
    tree: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  render(createElement, { props }) {
    const flat = [];

    function flatten(data, depth) {
      const depthRef = typeof depth !== 'undefined' ? depth + 1 : 0;

      data.forEach((item, index) => {
        const itemCopy = item;

        itemCopy.index = index;
        itemCopy.depth = depthRef;
        itemCopy.indentation = new Array(depthRef);

        flat.push(itemCopy);

        if (item.children.length) {
          flatten(item.children, depthRef);
        }
      });
    }

    flatten(props.tree);

    return flat.map((element) => createElement('div', {
      attrs: {
        'data-index': element.index,
        'data-depth': element.depth,
        class: 'sortable-item',
      },
    },
    [
      createElement(SortableItemContent, {
        props: {
          title: element.title,
          indentation: element.indentation,
        },
      }),
    ]));
  },
};

SortableItemContent

组件如下所示：

<template>
  <div class="item-content">
    <div
      v-for="(item, index) in indentation"
      :key="index"
      class="item-indentation"
    ></div>
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SortableItemContent',
  props: {
    title: String,
    indentation: Array,
  },
};
</script>

{{title}}
导出默认值{
名称：“SortableItemContent”，
道具：{
标题：字符串，
缩进：数组，
},
};

考虑到我在问题上发布的数据，它现在呈现了我想要的HTML元素：

标题
段落
容器
段落

---

再次感谢@AlexMA提供有关功能组件的提示。

有什么原因不能将元素列表包装在

中？顺便说一下，在VUE3中，这种限制正在消失。另外，组件AFAIK中不能有多个模板标记…@AlexMA我不想将它们包装在

中的原因是因为我想让孩子直接跟随父母等等。让我看看你建议的链接。然后我很确定在Vue 3之前，唯一的方法就是使用功能组件。请参阅链接答案。如果你想玩玩它的话。@AlexMA谢谢你做了一个快速测试。我会让你知道这是否有助于解决我的问题。非常感谢。