Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v-if on portal component does not work with target-el #163

Closed
dparker2 opened this issue Dec 10, 2018 · 9 comments
Closed

v-if on portal component does not work with target-el #163

dparker2 opened this issue Dec 10, 2018 · 9 comments
Labels
wontfix

Comments

@dparker2
Copy link

Demo: https://codesandbox.io/s/0y2wqy9w3w

I'm not sure if this is a bug (and may work after #139) or expected behavior because of limitations of the target being outside the vue app. In any case, I can't find any mention of a caveat with regards to using both target-el and v-if in either the doc section showing v-if being used or the doc section for target-el.
@LinusBorg
Copy link
Owner

Yeah IK'm pretty sure that this one of the side effects of the (honestly) half-assed implementation I did with targetEl.

In 2.0.0, we will have a <PortalTargetProvider> component that will take care of cleanly mounting and dismounting Portals to external elements.

For 1.* this will be a wontfix, though I would consider merging a fix if someone felt the need to send a PR.

@morkro

This comment has been minimized.

Sign in to view
@LinusBorg

This comment has been minimized.

Sign in to view
@morkro morkro mentioned this issue Dec 11, 2018
Closed
@morkro

This comment has been minimized.

Sign in to view
@towry
Copy link

towry commented Jan 11, 2019 

<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is  located.</p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anwhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>

How can I use outside of Vue app?

@morkro
Copy link

morkro commented Jan 11, 2019

@towry See here: https://linusborg.github.io/portal-vue/#/guide?id=rendering-outside-of-the-vue-app

Make sure to omit the name="" though, as this will not work. Here is an example:

Vue template

<portal target-el="#dialog">
  <!-- ... -->
</portal>

index.html

<body>
  <div id="app"></div>
  <div id="dialog"></div>
</body>

@towry
Copy link

towry commented Jan 12, 2019

@morkro I thought the target-el prop will be deprecated in next versions. I currently use this prop to render component outside of Vue app, directly mounted under the body element. The way I use it is to create a div dynamically and mount the component to it, and remove the div when my custom portal-slot.vue component beforeDestroyed being called. And days ago there is a bug from the production app that a popup modal wont close, I check it and turned out I use v-if on the portal but suddenly it doesn't work. While my custom portal-slot.vue component still work because I remove the div manually in the beforeDestroyed hook of my custom portal component. The version of portal-vue is ^1.1.1.

@LinusBorg
Copy link
Owner

LinusBorg commented Jan 12, 2019 •
edited
Loading

The targetEl feature is redone for upcoming 2.0, i won't remove it but change the implementation and API.

The new implementation won't have these sorts of problems.

@renatodeleao renatodeleao mentioned this issue Jan 24, 2019
Closed
@LinusBorg
Copy link
Owner

This should work fine in 2.0 with the new <MountingPortal> component, and is a wont-fix in 1.*, so I will close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
wontfix
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@LinusBorg @morkro @towry @dparker2