‘-‘ In v-bind:style / Vue.js

I cant understand how to make CSS code into v-bind:style with symbol ‘-‘. If i try to do something like that:

<DIV style="width:100px;height: 100px;background-color: red;cursor: pointer;" v-bind:style="{ margin-left: margin + 'px'}"></DIV>

I get:

invalid expression: Unexpected token '-' in

Answer

As explained in the Docs of Vue: “You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names”

So you’d need to change the margin-left to either marginLeft OR 'margin-left' to get it to work as intended.

Your code would then become:

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 
     v-bind:style="{ 'margin-left': margin + 'px'}">
     ...
</div>

OR

<div style="width:100px;height: 100px;background-color: red;cursor: pointer;" 
     v-bind:style="{ marginLeft: margin + 'px'}">
    ...
</div>

Hope this helps!