The use of '-' in v-bind:style within Vue.js

Question

I'm having trouble figuring out how to use CSS code with dashes in v-bind:style. When I attempt something like this:

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

I receive the error message:

invalid expression: Unexpected token '-' in

Answer 1

Answer №1

According to the information in the documentation of Vue: "You have the option to use camelCase or kebab-case (with quotes) for CSS property names"

To correct this, you should modify the margin-left to either marginLeft OR 'margin-left' for it to function correctly.

Your revised code would look like this:

<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>

I trust this clarifies things!

Answer 2

According to the information in the documentation of Vue: "You have the option to use camelCase or kebab-case (with quotes) for CSS property names"

To correct this, you should modify the margin-left to either marginLeft OR 'margin-left' for it to function correctly.

Your revised code would look like this:

<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>

I trust this clarifies things!