Как правильно клонировать часть компонента и отобразить во всплывающем окне?

Question

[photosho]

Нужно реализовать такой механизм, который при нажатии на кнопку внутри компонента будет клонировать часть его содержимого (помеченного атрибутом ref) и перемещать его в блок всплывающего окна. Сейчас всё реализовано в одном компоненте:

<div ref="overlay">
  <div ref="popup"></div>
</div>

<div>
  <div ref="clone">
    ...
  </div>

  <button @click="openPopup"></button>
</div>

В коде "openPopup" клонирую и вставляю содержимое обычными js-функциями "cloneNode" + "append" (почему-то "cloneVNode" + "render" работать не хотят). Соответственно, если таких компонентов на странице много, за каждым из них тянется этот груз разметки "popup" и клонированная разметка.

И я стал подозревать, что что-то делаю не так. Направьте, может быть, есть какие-то более правильные методы реализации.

Comments

[Alex_mos]

Может лучше не клонировать элементы а работать с данными которые содержаться тут

<div ref="clone">
    ...
  </div>

И отображаеть их в попап при открытии

[photosho]

Alex_mos, тогда они пропадут со страницы - будет прыгать содержимое.

Answer 1

[Антон Антон]

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