Class binding removes dynamically added classes

[Bodekaer]

Vue.js version

2.0.3

Reproduction Link

http://jsfiddle.net/df4Lnuw6/18/

Steps to reproduce

See Fiddle.

1. Create v-bind:class
2. Dynamically add a class using JS element.className.
3. Change the v-bind:class binding value.
4. This will overwrite the class added using element.className

   What is Expected?

In Vue 1.0, it was possible to dynamically add classes. This is important for MDL support, as it dynamically adds classes like "is-upgraded".

What is actually happening?

Class names added manually are removed.

[LinusBorg]

This is expected behaviour in 2.0, since these changes can't be reflected in the virtualDOM and get therefore overriden during updates.

[chasegiunta]

Is there a known workaround for this?

[LinusBorg]

theoretically, you could do this:

• in beforeUpdate(), use the DOM API to get the classes from the element
• in updated(), you could re-apply them - if the element was updated and the classes are missing.

that would be pretty tedious, complicated and error-prone, though.

[chasegiunta]

Eh, better to store classes in component data then & change them there. I was only asking because I was going unconventional and (in my circumstance) not using the element w/ dynamic classes in a component. Thanks for the input @LinusBorg