Vue.jsで、styleのプロパティ名に'-'が入っているとエラーになる

Question

Vue.jsでスタイルのプロパティの値を適時書き換えられるようなコードを書いたのですが、「Syntax Error: Unexpected token」となってしまいます。
どのように書き換えたらエラーを回避できるのでしょうか。よろしくお願いします。

        <div v-bind:style="titleBackground">
          <span>。。。</span>
        </div>

data () {
    return {
      titleBackground:{ background-color: 'red'}
    }
}

> 35 |       titleBackground:{ background-color: 'red'},
     |                                   ^

Answer 1

シングルクォーテーションで囲ってください。

data () {
    return {
      titleBackground:{ 'background-color': 'red'}
    }
}

Comments

[yori5070]

ありがとうございました。助かりました。