8

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!

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Derek
  • 289
  • 1
  • 4
  • 16
  • If I answered your question, then you can click the checkmark beside my answer to mark it as correct ;-) – asemahle Dec 01 '16 at 20:31

1 Answers1

26

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 }">
tony19
  • 125,647
  • 18
  • 229
  • 307
asemahle
  • 20,235
  • 4
  • 40
  • 38
  • 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! – Derek Dec 01 '16 at 18:54
  • No problem! My original explanation wasn't quite right... I've edited it to better explain why the quotes are necessary. – asemahle Dec 01 '16 at 19:01