reactive state for used/unused portal

[kmohrf]

trafficstars

Hi,

thanks for building this. I was wondering if it’s possible to hide or conditionally render any given element inside a component that uses a portal-target based on the current state of the portal-target (namely: whether or not something is being rendered inside of it). I’d imagine something like this.

<section v-if="$portals.actions.isInUse">
  <h3>Actions</h3>
  <portal-target name='actions' />
</section>

Basically i want to hide/not render the whole section if nothing on my page is using the portal to display content.

is this possible and I’m missing something? in case it’s not supported consider this issue a feature request :).

thank you!

[kmohrf]

While looking at the portal-target code I stumbled across the change event. It’s not documented (or at least I didn’t find anything), but I can work with it to solve my use case, by checking if the new transport is an empty object. Is this part of the api considered stable?

[LinusBorg]

It is documented, near the end of the portal target docs page.

https://linusborg.github.io/portal-vue/#/docs/portal-target?id=change

So yes it's stable.

But you should rather take a look at the Wormhole's API - it has a hasContentFor() method.

https://linusborg.github.io/portal-vue/#/docs/wormhole?id=hascontentfor

Edit: hm, now I understand, you want some kind of reactive data to bind the v-if to.

There's no public api for that yet...

[LinusBorg]

I'll make this a feature request - after 1.3.0 is released, the Wormhole is a Vue instance, so it should be trivial to add a computed prop that provides this type of data, and make it a public API.

[mitar]

I also have this need. I would need to switch some props on the parent component when child portal-target component is in use, to make the space. I have something like:

<v-toolbar :extended="isPortalTargetActive('destination')">
  <template slot="extension">
    <portal-target name="destination"></portal-target>
  </template>
</v-toolbar>

I do not want extra space for extension to be rendered if there is no portal content provided.

[LinusBorg]

you should be able to do this:

<v-toolbar :extended="portalIsActive">
  <template slot="extension">
    <portal-target name="destination" @change="portalIsActive = $event"></portal-target>
  </template>
</v-toolbar>

with portalIsActive being initiated in the component's data.

[mitar]

So whole $event is null when the portal target is not active?

[mitar]

I see, it is true and false. While this is great, this is different from documentation here? Or am I missing something?

[LinusBorg]

Because those are the old docs for version 1.*, where it worked differently

[mitar]

Ohhhh. Thanks!

So should this issue just be resolved by documenting this pattern?

[kmohrf]

As the original issue poster, I’d still find it useful to have some reactive state to bind to, instead of utilizing the change event for it. But then again I haven’t touched that code of my application in a very long time and my number of portals is pretty stable. So maybe this is more of a documentation issue for the change event or the use-case section than a problem that justifies a larger API surface. But I think that’s your call @LinusBorg :). I’m very happy with portal-vue either way!

[LinusBorg]

I'll keep it open, I'm still pondering to do something like a computed prop in the Wormhole instance, which could be used for stuff like that.