Vue.JS v-bind:style syntax not working?

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!

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