[2.0.0-rc.1] v-for and ref: $refs not reactive anymore?

[WolfgangFellger]

In 2.0.0-rc.1, a construct like

<p>Count: {{$refs.components && $refs.components.length}}</p>
<sub-component v-for="item in items" ref="components">

is not working anymore (count stays at initial value, even if items and thus component count is changed). In v1, arrays of $refs would reactively update.

I am not sure if this is a bug or a feature, but #2873 does not seem to mention it.

[yyx990803]

This is intended - the reason is that $refs are now registered/updated during the render process itself. It's not recommended to rely on $refs in templates as they are intended only for programmatic access in JavaScript.

I've updated #2873 to include this.

[toabi]

@yyx990803 does this mean that using this.$refs.* in computed properties will also stop working in v2 or is it just the use in templates? Do I have to solve all this with custom events?

I currently pass validation results from children to the parent like this.

[FTAndy]

you can use this.$forceUpdate() and setTimeout to rerender the view when you update the data and find that $refs not reactively update.

this.fetchSomeShit()
.then((data) => {
  this.data = data
  setTimeout(() => {
    this.$forceUpdate()
  })
})

use setTimeout to ensure the data has been given in what they say the vue taskqueue