Multiple portals with the same target-el don't work properly

[stephan-v]

I am looking for a similar method that you have used here to take elements out of their parent context and move them up in the dom so I can use fullscreen position: absolute elements without having to worry about my element hitting a relative container somewhere.

What I am missing though is having multiple elements point to the same target. I have a couple of components that I might want to display fullscreen. Their display is toggled through a view property in Vuex which decides which particular fullscreen component to display.

With your solution I would have to specify a to and target for everyone of my components though. I do not care about creating a specific placeholder for each components. I simply want to shove them all up in the dom.

Is this still possible with this component somehow or is this is a totally different approach?

[LinusBorg]

Hi @stephan-v

Thansk for your request.

If you mean that you want to have mutliple components in one target at the same time, that's actually a duplicate of #26 and will be possible eventually - when if find the time to code it ;)

But to me it sounds like you want to show different sources in the same target, but only one at a time (as it doesn't make sense to have more than one component in fullscreen at the same time).

That's already achievable- you just have to make sure that you only send one source to the portal target at a time, which should be achievable with something similar to this:

<portal target="#outside-dom"  to="some-name" :disabled="!fullscreen">

you can re-use that anywhere as much as you like and re-use the same target.

[stephan-v]

I can't really seem to get it to work properly:

https://codepen.io/stephan-v/pen/XaNzpP

It simply toggles the components instead of inserting the data in my #widget element. Thanks for your help so far.

If this were to work, it would be perfect for my fullscreen scenario.

[LinusBorg]

Hm, that should work, I even have an example in the repo here that does the same, basically:

https://github.com/LinusBorg/portal-vue/tree/develop/example/components/source-switch

Will have to investigate, sorry

[LinusBorg]

Ok so I found two things:

1. Somehow Vue version 2.2.4, which you used, had a problem with this whole thing. Can't say why for the moment.
2. Appearantly, dynamically re-creating the same portal-target with target-el doesn't work as well as intended.

But once I worked around those two things, I got it working:

https://codepen.io/LinusBorg/pen/eEByOX

I will keep this open as a bug report that target-el has to be fixed to support this. Already have an idea, probably have to check if the target-el element already is a portal-target component, so it doesn't get "overridden".

[LinusBorg]

So I tried to fix this, but I really can't figure out why it won't work in the Fiddle. It works well in my local test project (but that uses weback/vue-loader).

I'm thinking about ditching target-el alltogether (in v2) and recommend to mount an instance of PortalTarget programmatically instead. But I'm not sure how many people use this.. :/

[LinusBorg]

Will be solved with #139

[LinusBorg]

Done in next branch for 2.0.0, will release an alpha this week.

Won't be fixed in 1.*