[SOLVED] V-bind:class gives raw expression error unexpectedly


I want to use v-bind:class for a class but I am getting this error

  • invalid expression: Unexpected token - in
    { my-color: isHold }
    Raw expression: v-bind:class="{ my-color: isHold }"

It works in one case but not in the other
what is the difference between this two code ? first one works but second one not

this works

#remoteVideoContainer(v-bind:class="{ a2: isActive2 }")

this doesnt work

i.icon.material-icons.md-only(v-bind:class="{ my-color: isHold }") phone_paused


You can’t use object keys with dash in JavaScript

It must be:

i.icon.material-icons.md-only(v-bind:class="{ 'my-color': isHold }") phone_paused