Разрыв макета с рекурсивными компонентами в VueJS - PullRequest
Новая
       4

Разрыв макета с рекурсивными компонентами в VueJS

0 голосов
/ 09 июля 2020

У меня проблемы с решением проблемы. Мне нужно динамически загружать некоторые компоненты. И при загрузке некоторых из этих компонентов они отображаются с ошибками или без стилей css, и все из-за того, что первый элемент div после шаблона. При редактировании DOM и удалении этого DIV все было правильно. Однако VueJS не позволяет использовать v-for в root.

Я использую компоненты 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>

1 Ответ

0 голосов
/ 09 июля 2020

Есть ли у этого компонента родительский элемент? Если он должен, попробуйте поместить его в for-l oop в родительском. Если у него нет родителя, создайте его и сделайте для l oop там. Например:
Родительский компонент: 

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

Дочерний компонент 

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