Vue: combining :class="myclass" and class="{{myclass}}" not working

[kvdmolen]

When combining the two to methods below, only the first is rendered:

<p class="page-{{mypage}}" :class="{'page-option': hasoption}">Some page</p>

Is this a bug, or what would be best practice?

Fiddle: https://jsfiddle.net/cg801yp5/

1.0.21

[smolinari]

Not sure if this is what you are looking for, but it's my best guess.

https://jsfiddle.net/cg801yp5/1/

Scott

[phanan]

The official guide states that:

Although you can use mustache interpolations such as class="{{ className }}" to bind the class, it is not recommended to mix that style with v-bind:class. Use one or the other!

So please try to avoid doing so, because the outcome is not guaranteed.

[kvdmolen]

Ah, overlooked that, sorry.

Though, I would vote this to be possible in the future?

[smolinari]

@kvdmolen

Wouldn't the solution I offered work for you?

Scott

[kvdmolen]

@smolinari it does! You're right, thanks!

(the link didn't work for me before)

The solution:

<p :class="['page-' + mypageClass, {'page-option': hasoption}]">Some page</p>

[yyx990803]

Make sure to use dev build, it already warns you against such usage: https://jsfiddle.net/1zuw6be5/