Invalid expression: v-bind:class

Hi,

The following code works:

html

v-bind class

js
const app = new Vue({
el: ‘#app’,
data: {
isActive: true
}
});

But I am using bulma and the right name of the class is: is-active
If you use that in the above code it errors with:

  • invalid expression: v-bind:class="{ is-active: isActive }"

Am I doing something wrong or is this a bug?

Cheers,
Peter

It’s a JavaScript thing. Object keys that contain a hyphen have to be written with quotes.

{ 'is-active': is active }

OK Thanks !