Vue: Merging default html class and :class with same value results in duplicate class

[nickgr6]

Vue.js version

2.0.5

Reproduction Link

https://jsfiddle.net/e2c6y887/2/

Steps to reproduce

Click on 'test2'

What is Expected?

Test1 link should not have 'active' class and thus no red color.
The reason I'd want to combine class and v-bind:class (with both 'active' class) is, that the initial active class is added by JSP code and the second by Vue. If I don't have this initial class logic, the button gets the 'Vue active class' to late which causes a not very nice jump in the page.

What is actually happening?

Both test1 and test2 have 'active' class and are 'red'.
When clicking 'test1' again, and inspect the element, 'test1' have 2 'active' classes instead of one.

With Vue1 it works a bit different: https://jsfiddle.net/pfu2dw3j/1/
When clicking 'test2' both links have 'active' class. When clicking test 1 and test 2 again, it works correct from that point.

Do I use it wrong, or is it a bug?

[fnlctrl]

Hi, thanks for filling this issue. Vue will keep static classes in templates as-is. Please define your default class in vue's data.

[nickgr6]

What do you mean with 'Please define your default class in vue's data.'?
I don't see how that's going to fix my problem: have an active class on a button when Vue is not loaded yet and still, have correct logic, after Vue is loaded?

[nickgr6]

For others who stumble upon the same issue:
I've fixed it with (a little nasty) css workaround, see: https://jsfiddle.net/8vfLgvr1/1/

[defcc]

@nickgr6 the class attribute (staticClass) and the class binding (:class) will be merged together in runtime.

[errogaht]

@fnlctrl hello, please reopen issue. In that vay Vue is not usable for web-sites. Dont understand for what purpose Vue created.
I just want to see my first button in list active, before Vue loaded! i don't want to blinking button because "Vue will keep static classes in templates as-is" i have "active" class(static) before Vue loaded. Then i want remove this class by Vue with class binding, but its not working! vue make "active active" class, wtf. i don't understand for which purposes Vue created - just for fun? i want use it in production in regular web sites, not only with SPA

[yyx990803]

@errogaht hello, you can stop using Vue if you are so angry.