Add warning & doc entry about conflicts with the "style" attribute on Vuebar elements.

[guykatz]

so this took me a while to reproduce: https://jsfiddle.net/gkatz/cadoqgaf/
in the jsfiddle above, go to the <div v-if="loading" style=""> and simply remove the style attribute and everything will work, this also happens with other regular attributes.
I am no JS expert and so I sis not debug the problem.
all of my templates look the same, I have many components which show a loading spinner until mounted so this affects all my app. any suggestions?

[DominikSerafin]

Hey @guykatz, thanks for filling in the issue.

Vuebar doesn't init in this case because style attribute is used on the element w v-bar directive.

And what happens here is probably Vue render overwriting Vuebar style attributes with that empty style="".

What I will do from my side is to add information about this in the documentation and add warning in the Vuebar itself.

But this behavior can't be fixed because it's needed for Vuebar to work at all. So I just suggest you to wrap your Vuebar container or not using inline styles on the Vuebar elements.

[guykatz]

thanks for the quick answer but I think you have missed something
there is no v-bar directive on the element with the style. it is a sibling element. the vuebar directive is on another element. I do not understand why a sibling element would be affected at all. can you ellaborate?
thanks

[DominikSerafin]

Hi @guykatz

Oh yeah, you're right I have missed it. But actually it's still kind of applies what I've said.

The problem here is that you've missed key attribute on these elements.

If you don't provide key for the v-if/v-else-if/v-else and for looped elements with v-for then Vue might sometime not update these elements correctly because Vue doesn't rerender all elements on update but reuses elements already rendered.

So Vue probably still treated both of these elements as one - hence the style conflict.

https://vuejs.org/v2/api/#key

See updated JSFiddle: https://jsfiddle.net/cadoqgaf/2/

[guykatz]

oh wow, i had no idea about this applying to other elements except of loop.
thanks for pointing this out.