v-if does not work on the slot

[xandao-dev]

The example provided in the readme does not work because modalOpen starts false, in the Teleport mounted the nodes are settled, but it doesn't watch for node changes.

<template>
  <div>
      <button @click="modalOpen = true">
          Open full-screen modal! (With teleport!)
      </button>

      <Teleport to="body">
        <div v-if="modalOpen" class="modal">
          <div>
            I'm a teleported modal! 
            (My parent is "body")
            <button @click="modalOpen = false">
              Close
            </button>
          </div>
        </div>
      </Teleport>
  </div>
</template>

Workaround: Make sure to have an initial node.

<template>
  <div>
      <button @click="modalOpen = true">
          Open full-screen modal! (With teleport!)
      </button>

      <Teleport to="body">
        <div v-show="modalOpen" class="modal">
          <div v-if="modalOpen">
            I'm a teleported modal! 
            (My parent is "body")
            <button @click="modalOpen = false">
              Close
            </button>
          </div>
        </div>
      </Teleport>
  </div>
</template>

Long-term solution: Watch for node changes in the Teleport component.

[Mechazawa]

Didn't consider that when I built it. I'll have a look at it

[jackiotyu]

2

7