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!

1
  • If I answered your question, then you can click the checkmark beside my answer to mark it as correct ;-)
    – asemahle
    Dec 1, 2016 at 20:31

1 Answer 1

25

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 }">
2
  • 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 1, 2016 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 1, 2016 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.