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

Portal-target not updating with new information #402

Closed cbloss closed 11 months ago

cbloss commented 1 year ago

I'm upgrading from Vue 2 to 3. I've got a portal that will update the first time and then not the rest of the time. Here's what I have:

In PageBuilder.vue, I set the portal (easy cheesey): <portal-target name="blockSettings"></portal-target>

Next, I have a bunch of items that are draggable. Each item, on click is supposed to clear the portal with Wormhole.

In template:

<div
    @click.stop="editBlockContent"
  >
    // Block is correct here.
    <component
      :class="block.blockType"
      v-model="block"
      :is="getType(block.blockType)"
      :context="context"
    />

    <portal to="blockSettings">
      This is in portal - pre block settings.<br/>
      // Here, block will be right the first time but when you click on a different draggable item and back to this one, it won't update.
      {{ block.title }} 
      <block-settings  v-model="block" context="settings" />
    </portal>

    <button v-if="icons == 'wrap'" @click.stop="$emit('remove-child')">
      <fa-icon class="ml-2 mt-2" icon="minus-circle">Trash</fa-icon>
    </button>

  </div>

And down below in the methods, the editBlockContent method....

// Note, some of this was from the previously working vue2. 
editBlockContent() {
      if (this.$el.closest('.content-settings')) {
        return
      }

     // This block is correct.
      console.log(this.block ?? 'Nothing to see here.')

      Wormhole.close({to: 'blockSettings'})

      // Couldn't find a replacement fir this method. 
      // if (Wormhole.hasTarget('blockSettings')) {
      //   Wormhole.close(
      //     {
      //       to: 'blockSettings',
      //     },
      //     true
      //   )
      // }
    },

Is there something I need to be doing here to get the portal to update? Appreciate any tips!

cbloss commented 1 year ago

So a tiny update after digging into the repo. It looks like Wormhole.close documentation needs slight tweaking. The force is no longer there (you're welcome star wars fans) and from is now required despite the optional param in the original TransportCloser. I've tried Wormhole.close({to: 'blockSettings', from: 'blockSettings'}) and get a blank portal.

cbloss commented 11 months ago

For anyone who needs it, you gotta initialize the womrhole and add a from to the close. While the documentation says from is optional, it's not if you follow the code.