VueJS：v-bind：样式仅在v-for中有条件地工作

Question

Using v-bind:style works fine when binding color :

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

But, binding to the background-color does not work:

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

And neither does binding to border-top :

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

What could cause this to 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> 

Answer 1

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

must be

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

because background-color can't be used as object property key unless surrounded with quotes. Same with border-color it should be:

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

Basically, you need to make sure parser doesn't try to interpret - character as minus and then think that border is a variable.