Динамически оборачивать несколько экземпляров компонента в один родительский компонент - PullRequest
Новая
       11

Динамически оборачивать несколько экземпляров компонента в один родительский компонент

0 голосов
/ 01 июня 2019

Я пишу классический модальный компонент в Vuejs, сделанный из оболочки, темного наложения (охватывающего всю страницу за ним) и фактического содержимого.

Проблема в том, что я хотел бынапишите это 

<button>Trigger Modal 1</button>
<Modal :id="modal1">
    Some content
</Modal>

<button>Trigger Modal 2</button>
<Modal :id="modal2">
    More content
</Modal>

и получите следующий отрендеренный код 

<button>Trigger Modal 1</button>
<button>Trigger Modal 2</button>

<div class="modal-wrapper">
   <div id="modal1">Some content</div>
   <div id="modal2">More content</div>
</div>

Я делаю это, потому что я не хочу повторять какие-либо из общих элементов каждого модального, так каких может быть много на странице.

То, что я пробовал до сих пор

На beforeMount проверить, отображается ли это первый Modal компонент (при проверкеDOM для .modal-wrapper) и, если он там, добавьте туда текущий экземпляр, если не добавьте, создайте его, используя document.createElement.Но то, что я получаю, это элемент .modal-wrapper для каждого модального объекта, возможно потому, что событие beforeMount get запускается сразу для всех элементов, присутствующих во время рендеринга.

Любые идеи о том, как яможно сделать это?

...