Vue: Vue will remove unused node and set the refs to undefined

Created on 18 Sep 2017  ·  3Comments  ·  Source: vuejs/vue

Version

2.4.4

Reproduction link

https://jsfiddle.net/gloxing/Ltjyjjba/

Steps to reproduce

click button twice, the refs of components will be undefined

What is expected?

the topProgress component show again

What is actually happening?

the refs of component will be undefined


The behaviour is normal in Vue 2.4.2.

Most helpful comment

Yeah, v-show should work. But before v2.4.4 both v-show and v-if works well.

All 3 comments

This is actually related to your lib: https://github.com/dalphyx/vue-top-progress/blob/master/src/top-progress.vue#L7
I think that because you're using a v-if, it gets stripped off and doesn't exist (transition being an abstract component that doesn't render a tag). Have you tried using a v-show, it should work: https://jsfiddle.net/t5ad6o31/

Another solution would be to wrap your component in a div or span

Yeah, v-show should work. But before v2.4.4 both v-show and v-if works well.

vue refs undefined

Was this page helpful?
0 / 5 - 0 ratings