Subscribe on changes!

Can not render a transition-group using render function

avatar
Nov 8th 2020

Version

3.0.2

Reproduction link

https://jsfiddle.net/dede89/wv2x79bs/

Steps to reproduce

Check the jsfiddle, I am trying to render a transition-group inside a render function:

render() {
 return Vue.h('transition-group',{ tag: 'ul'}, 
   [1,2,3].map(value => Vue.h('li',{key: value}, value)))
 }

The HTNL rendered is:

<transition-group tag="ul"><li>1</li><li>2</li><li>3</li></transition-group>

What is expected?

Render a transition-group using the tag property to create correct html element:

<ul><li>1</li><li>2</li><li>3</li></ul>

What is actually happening?

A element with name "transition-group" is created in the DOM

avatar
Nov 8th 2020

You have to import this component from Vue now.

import { TransitionGroup } from 'vue'

...

h(TransitionGroup ....

When using templates, the compiler does this for you.

In case you wonder why: this is so that the component can be tree-shaken form your bundled app if you don't actually use it.