I cant understand how to make CSS code into v-bind:style with symbol ‘-‘. If i try to do something like that:
JavaScript
x
2
1
<DIV style="width:100px;height: 100px;background-color: red;cursor: pointer;" v-bind:style="{ margin-left: margin + 'px'}"></DIV>
2
I get:
JavaScript
1
2
1
invalid expression: Unexpected token '-' in
2
Advertisement
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:
JavaScript
1
5
1
<div style="width:100px;height: 100px;background-color: red;cursor: pointer;"
2
v-bind:style="{ 'margin-left': margin + 'px'}">
3
4
</div>
5
OR
JavaScript
1
5
1
<div style="width:100px;height: 100px;background-color: red;cursor: pointer;"
2
v-bind:style="{ marginLeft: margin + 'px'}">
3
4
</div>
5
Hope this helps!