VueJS: v-bind: style only works conditionally in v-for

Question

Using v-bind:styleworks fine when binding color:

<p v-bind:style="{ color: '#' + tradingCardOption.BorderColorHex }">
  {{ tradingCardOption.ColorSetName }}
</p>

But binding to background-colordoes not work:

v-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex }" 

And does not become attached to border-top:

v-bind:style="{ border-top: 15px solid + '#' + tradingCardOption.CornerColorHex }"

What can make it work so conditionally?

<div v-for="tradingCardOption in tradingCardOptions">
  <div v-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex}" class="color-swatch " v-bind:class="{'selected' : $index == 0}" v-on:click="selectTradingCardOption(tradingCardOption, $event)">
    <div v-bind:style="{ border-top: 15px solid + '#' + tradingCardOption.CornerColorHex}"></div>
  </div> {{ tradingCardOption.BorderColorHex}}
  <p v-bind:style="{ color: '#' + tradingCardOption.BorderColorHex}"> {{ tradingCardOption.ColorSetName }}</p>
</div>

Run codeHide result

Answer 1

Object keys must be correctly specified if you use key names that are not valid identifiers. sov-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex}"

it should be

v-bind:style="{'background-color': '#' + tradingCardOption.BorderColorHex}"

because it background-colorcannot be used as an object property key if it is not surrounded by quotation marks. The same with border-colorshould be:

{'border-top': '15px solid #' + tradingCardOption.CornerColorHex}

, , - , , border .