VueJS dynamic style

Question

I have a list looping the array of colors and I hope to bind the color value to color styling of the corresponding name. For example, INDIANRED has the color indian red.Unfortunately, the text color name was not styled color as I wanted. Help appreciated.

<ul>
  <li v-for="redColor in redColors">
  <p v-bind:style="{ color: '{{redColor.hexcode}}' }">{{redColor.name}}</p>   {{redColor.hexcode}} {{redColor.rgbcode}}
    <hr>
  </li>
</ul>


data () {
  return {
    redColors : [
      {name: 'INDIANRED', hexcode:'#CD5C5C', rgbcode:'RGB(205,92,92)' },
      {name: 'LIGHTCORAL', hexcode:'#F08080', rgbcode:'RGB(240, 128, 128)' },
      {name: 'SALMON', hexcode:'#FA8072', rgbcode:'RGB(250, 128, 114)'},
      {name: 'DARKSALMON', hexcode:'#E9967A', rgbcode:'RGB(233, 150, 122)' },
      {name: 'LIGHTSALMON', hexcode:'#CD5C5C', rgbcode:'RGB(255, 160, 122)' },
      {name: 'CRIMSON', hexcode:'#DC143C', rgbcode:'RGB(220, 20, 60)' },
      {name: 'RED', hexcode:'#FF0000', rgbcode:'RGB(255, 0, 0)' },
      {name: 'FIREBRICK', hexcode:'#B22222', rgbcode:'RGB(178, 34, 34)' },
      {name: 'DARKRED', hexcode:'#8B0000', rgbcode:'RGB(139, 0, 0)' },
    ],
  }
}

What does "The color code does not appear as I wanted" mean? What do you want it to look like. See [MCVE] — Blue, Jan 12 '18 at 16:58
Possible duplicate of [Vue.JS v-bind:style syntax not working?](https://stackoverflow.com/questions/40918076/vue-js-v-bindstyle-syntax-not-working) — thanksd, Jan 12 '18 at 17:09

Xdynix · Answer 1 · 2018-01-12T17:10:33.940

1

In v-bind you should write javascript expression but not string or template string.

So it should be

<p v-bind:style="{ color: redColor.hexcode }">{{redColor.name}}</p>

edited Jan 12 '18 at 17:10

answered Jan 12 '18 at 17:01

Xdynix

21
3

1

close. It should be `:style="{ color: redColor.hexcode }"`. See https://vuejs.org/v2/guide/class-and-style.html – thanksd Jan 12 '18 at 17:09
@thanksd Thanks for your advice! I'm also new to vue.js and haven't read about class and style. – Xdynix Jan 12 '18 at 17:13

VueJS dynamic style

1 Answers1