search

LinusBorg / portal-vue

A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org)
http://portal-vue.linusb.org
MIT License
3.9k stars 187 forks source link

Can not make MountingPortal NOT cause duplicates #326

Closed Diniden closed 2 years ago

Diniden commented 3 years ago

I may be missing something, but I have at this point tried everything to have a modal mounting point, use MountingPortal and render into that mounting point. No matter what I do, every update on my component creates duplicates within the DOM.

Modal root exists

<html>
  <body>
     <div id="__modal_root__" />
  </body>
</html>

Component uses MountinPortal to do it's thing

<template>
  <MountingPortal :mountTo="#__modal_root__" append name="menu">
     <my stuff />
  </MountingPortal>
</template>

Devil spawn happens

<html>
  <body>
     <div id="__modal_root__" >
        <my stuff />
        <my stuff />
        <my stuff />
        <my stuff />
        <my stuff />
     </div>
  </body>
</html>

Doesn't matter what props I set on MountingPortal. Every update spawns mass duplicates in my DOM.

My workaround is to nuke the modal root every update. But it's not ideal and is very frustrating.

Diniden commented 3 years ago

This may not be an issue with this component...Working on determining if it is or not...This is within storybookjs and I just discovered my component is never calling "beforeDestroy" or even "updated" when properties are changed. It's just remounting.

I am not having this issue with other components though, so I'm still suspect of this component causing me woes and misfortune.

LinusBorg commented 3 years ago

Closed this as there was no further info coming in.