v-bind:style syntax not working in inline styles

Question

I'm fairly knew to Vue and the whole v-bind thing is throwing me for a loop...

Basically, I'm trying to achieve this syntax, but with Vue's v-bind, since I can't use a variable in an inline CSS style:

<div class="card" style="background-color: {{school.color}}">

Here's my Vue syntax, which I've followed from their documentation, but it's still throwing an error and I can't figure out why? Obviously, it has to be something simple, I just don't fully understand the intricacies of Vue yet!

<div class="card" :style="{ background-color: school.color }">

Any help would be much appreciated!

Aloeswood

If I answered your question, then you can click the checkmark beside my answer to mark it as correct ;-) – Roderick

Answer 1

For object syntax bindings you are binding an object. Thus, the keys must be valid, and need to be quoted unless they are valid unquoted keys. Dashes - are not allowed in unquoted keys, so it fails to compile.

Either of these options will work:

<div class="card" :style="{ 'background-color': school.color }">

or

<div class="card" :style="{ backgroundColor: school.color }">

Roderick

Ha! That was simple. I've been going crazy trying to figure this out and it's just a simple quotation mark. Thanks so much! – Aloeswood

No problem! My original explanation wasn't quite right... I've edited it to better explain why the quotes are necessary. – Roderick