VueJS 中递归组件的布局中断答案

【问题标题】：Layout break with recursive components in VueJSVueJS 中递归组件的布局中断
【发布时间】：2020-10-30 06:24:49
【问题描述】：

我无法解决问题。我需要动态加载一些组件。并且在加载其中一些组件时，它们会被呈现错误或没有 css 样式，都是因为模板之后的第一个 div 元素。编辑 DOM 并删除此 DIV 时，一切都是正确的。但是，VueJS 不允许你在 root 中使用 v-for。

我使用的是 Vuetify 组件，所以在某些情况下 Vuetify css 需要一个满足你的 css 类的级别，所以这个 DIV 不能在组件之间。

有没有办法解决这个问题？

ControlsComponent.vue

<template>
  <div>
    <div v-for="(component, index) in childs" :key="index" draggable>      
      <component :is="component.Type">
        <ControlsComponent :parent="component" :childs="component.Childs"></ControlsComponent>
      </component>      
    </div>
  </div>
</template>

【问题讨论】：

故障是什么意思？你能展示这个组件（包含 for 循环）在哪里呈现的代码吗？我猜你只需要在那里添加一个类或 ID。
问题是正在对子元素进行循环，我必须进行更改并包含父 div 的结构。

标签： html css vue.js vue-component

【解决方案1】：

这个组件有父组件吗？如果它尝试将其放入父级的 for 循环中。如果它没有父级，则创建一个父级并在那里进行 for 循环。例如：
父组件：

<Child v-for="(component, index) in childs" :key="index" draggable></Child>

子组件

<component :is="component.Type">
 <ControlsComponent :parent="component" :childs="component.Childs"></ControlsComponent>
</component>

【讨论】：