Subscribe on changes!

Cannot render a component twice programmatically

avatar
Jan 8th 2022

Version

3.2.26

Reproduction link

codesandbox.io

Steps to reproduce

Call the createVNode method twice using the same component and render both vnodes

What is expected?

It should render both vnodes

What is actually happening?

Only the first vnode is visible


I'm trying to render multiple times the same components for an hud (for example, multiple health bars using the same HealthBar.vue component) programmatically using the render method. But only the first vnode is visible.

avatar
Jan 9th 2022

Maybe you need a key ? impicture_20220109_111043

avatar
Jan 9th 2022

Yes, I've also tried adding differents keys to both vnodes but only the second vnode is visible, but I'd like them to be both visible.

I'm expecting something like this : image

avatar
Jan 9th 2022

Well, then you should merge two Vnodes and it's not a bug.

avatar
Jan 9th 2022

https://v3.vuejs.org/api/application-api.html#mount

The innerHTML of the provided DOM element will be replaced with the rendered template of the application root component.

The same happens when you directly use render() (which app.mount() wraps).