Refs incorrect when using v-for and combining components and elements

[floorish]

Version

2.3.4

Reproduction link

https://jsfiddle.net/floorish/7td2offb/

Steps to reproduce

• Parent with dynamic components, referenced by ref: <component :is="child.type" v-for="child in children" :key="child.id" ref="children"></component>
• Multiple child.types where one of them uses a loading component: <loading v-if="isLoading"></loading> <div v-else>Child B ready</div>
• In Child switch isLoading from true to false after a timeout/async call

What is expected?

parent.$refs.children equals the displayed child components

What is actually happening?

parent.$refs.children only includes the child component that has the loading mechanism

---

This is very much an edge case, but it took me a while to figure out any solutions. Most trivial solution is to wrap the Child template in another <div>, but AFAIK the <div v-if="val"></div> <div v-else></div> construct in the root of a template is supported in Vue (there is always a single root element).

Other solutions are provided in reproduction link.

[no1xsyzy]

Cited from https://vuejs.org/v2/guide/components.html#Child-Component-Refs

$refs are only populated after the component has been rendered, and it is not reactive.

I think you should not use it for dynamical referring to components. try to use props / $emit.

[floorish]

That might have something to do with it. But in this case the $refs does change after it has been populated initially, which (for me) is unexpected.

[no1xsyzy]

You actually can call any function to generate a string for the ref attribute (with full reactive support).

Although somehow difficult, it is even possible to change that from the child component (add new data to parent and $emit an event from child to tell the parent to change ref ) - although it may pollute the code.