Vue: Cannot use functional components inside of transition-group

[txs1992]

Version

2.5.13

Reproduction link

https://jsfiddle.net/_MT_/qzLptLvs/10/

What is expected?

[Vue warn]: <transition-group> children must be keyed: <element>

What is actually happening?

渲染失败

[posva]

Seems to be a problem related to functional components and transition-group (changed the title)

[maxirozay]

The component doesn't get the key. You could wrap it like:

<transition-group tag="div" name="tag-list">
  <div v-for="index in 5" :key="index">
    <cpt-tag></cpt-tag>
  </div>
</transition-group>

[txs1992]

But why doesn't the function component get the key in the transition-group ?

[maxirozay]

It seems to be not implemented.

[sqal]

You see the warning because you simply did not pass key reference from the context object to the root element of the Tag component.

https://jsfiddle.net/7hy9sw7r/

[posva]

I'm so glad you're here sometimes @sqal 😉

[txs1992]

pretty

[txs1992]

<template functional>
</template>

https://codesandbox.io/s/rjjmpvwm4n

But how does a single file component bind context.data?

@sqal @posva @maxirozay

[weotch]

But how does a single file component bind context.data?

It's on the data object that the template receives:

<template functional>
  <div :key='data.key' />
</template>