v-bind:class has problem with hyphenated class names

If I use

v-bind:class="{ img-holder-selected : isUpload}"

I'm getting the following warning:

[Vue warn]: Invalid expression. Generated function body:  {scope.img-scope.holder:scope.isUpload}

and the error message: Uncaught TypeError: Cannot read property 'get' of undefined.

But If I use

v-bind:class="{ imgHolderSelected : isUpload}"

it's working well. Does that mean I cannot use hyphenated classes in vue?

Best Answer

Level 41

v-bind:class="{ 'img-holder-selected' : isUpload}"

3 likes

Level 10

@thomaskim : Seems like I'm missing very silly things :D Thanks mate.

1 like

Level 1

This is not a Vue.JS issue. In javascript you can't have a object property with hyphens, unless you use the thomaskim example.

Please or to participate in this conversation.