Subscribe on changes!

when teleport target is't exists, patch and unmount will cause a error

avatar
Jul 7th 2021

Version

3.1.4

Reproduction link

https://codepen.io/purple-tree/pen/dyWMpXo

Steps to reproduce

situation1(https://codepen.io/purple-tree/pen/dyWMpXo):

1.create a teleport which does not have a valid target and set v-if to it

2.swicth v-if value will cause an error, because the vnode need unmount is null.

situation2(https://codepen.io/purple-tree/pen/gOmNXZY):

1.create a teleport which does not have a valid target and its children has some reactive data

2.modify the reactive data will cause an error, because the vnode need pacth is null.

What is expected?

There shouldn't be an error. I think maybe when the target is'nt exists, patch and unmount shouldn't be happen.

What is actually happening?

patch and unmount happend, and cause an error.


Maybe there should have a null judgement before call the relation methods.

avatar
Jul 7th 2021

The warning tells you about it:

[Vue warn]: Failed to locate Teleport target with selector "h1". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree. 
  at <App>

The element shouldn't be inside the component and you must ensure it is there when the teleport mounts. That's why it recommends the element to be outside of the Vue app


Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂