javascript - 如何解决 Vue.js 中多个根元素的限制？

Question

这个问题已经有答案了:

A way to render multiple root elements on VueJS with v-for directive (6 个回答)

已关闭 3 年前。

希望有人能够帮助我解决这个问题。

我有以下数据:

[
  {
    title: 'Header',
    children: [
      {
        title: 'Paragraph',
        children: [],
      },
    ],
  },
  {
    title: 'Container',
    children: [
      {
        title: 'Paragraph',
        children: [],
      },
    ],
  },
]

我想将其呈现在 <div> 列表中像这样:

<div class="sortable-item" data-depth="1" data-index="0">Header</div> <!-- Parent -->
<div class="sortable-item" data-depth="2" data-index="0">Paragraph</div> <!-- Child-->
<div class="sortable-item" data-depth="1" data-index="1">Container</div> <!-- Parent -->
<div class="sortable-item" data-depth="2" data-index="0">Paragraph</div> <!-- Child-->

我已经构建了一个递归组件，这是我到目前为止所拥有的:

<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>

正如你所看到的，我不仅有一个 <template>作为根元素，我还有一个 v-for ，Vue.js 的两个“不”。如何解决这个问题以呈现我上面指出的元素列表？

注意:我已尝试过vue-fragment我能够实现我想要的结构，但是当我尝试使用 Sortable.js 时它不起作用，好像它无法识别任何 .sortable-item元素。

任何帮助将不胜感激!谢谢!

Answer 1

感谢@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>

鉴于我在问题上发布的数据，它现在按照我想要的方式呈现 HTML 元素:

<div data-index="0" data-depth="0" class="sortable-item">
  <div class="item-content">
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">Header</div>
    </div>
  </div>
</div>
<div data-index="0" data-depth="1" class="sortable-item">
  <div class="item-content">
    <div class="item-indentation"></div>
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">Paragraph</div>
    </div>
  </div>
</div>
<div data-index="1" data-depth="0" class="sortable-item">
  <div class="item-content">
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">Container</div>
    </div>
  </div>
</div>
<div data-index="0" data-depth="1" class="sortable-item">
  <div class="item-content">
    <div class="item-indentation"></div>
    <div class="item-wrapper">
      <div class="item-icon"></div>
      <div class="item-title">Paragraph</div>
    </div>
  </div>
</div>

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