Vue: Conditional class fails if the class name contain dashes

[FrancescoMussi]

Version

2.5.3

Reproduction link

https://codesandbox.io/s/vjyn5v63x5

Steps to reproduce

Apply a conditional class using a class name that contains a dash.
In my case:

v-bind:class="{ navbar-shrink: scrolled }"

What is expected?

I would expect the normal behaviour of rendering the conditional class

What is actually happening?

The app broke with the following error message:

- invalid expression: Unexpected token - in

    { navbar-shrink: scrolled }

  Raw expression: :class="{ navbar-shrink: scrolled }"

---

By changing the class name everything works as usual:

v-bind:class="{ navbarShrink: scrolled }"

But this behaviour could be an issue when using certain bootstrap or bulma css classes on which we don't have complete control.

[yyx990803]

It's JavaScript so you need to quote the keys.