CODEWITHSUNDEEP
javascriptvue.js
Dave
Dave

Reputation: 75

v-bind:style with array of styles

I'm using vue with a v-for loop to create spans. The following is successful with one style using bootstrap4's background-color:

<span v-for="(group, index) in item.primary" 
      :key="index" 
      :class="'badge'" 
      :style="{`background-color: ${tagsText[group].color}`">
      {{ group }}
</span>

<script>
    export default {
     data () {
      return {
        tagsText: {
         calling_spirits: {
           color: '#800000',
           text: 'light'
           }
         }};
     }
    };
</script>

I want to add a second styling (for text colour) but can't get it to work. With the span style changed to the following, I get no errors and no styling.

:style="`background-color: ${tagsText[group].color}`, `text-light`">

Same with: 

:style="`background-color: ${tagsText[group].color}`, `text-${tagsText[group].text}`">

Upvotes: 0

Views: 2376

Answers (1)

&#214;zg&#252;r Uysal
&#214;zg&#252;r Uysal

Reputation: 370

I'd recommend reading https://v2.vuejs.org/v2/guide/class-and-style.html and understanding object and array syntaxes. Like Shekhar Chikara says you're mixing inline styles with classes. Your template should be something like this, I believe:

<span
  v-for="(group, index) in item.primary" 
  :key="index" 
  :class="`badge text-${tagsText[group].text}`"
  :style="{ backgroundColor: tagsText[group].color }">
  {{ group }}
</span>

ie, text-light is a css class. You should add to class attribute of span element.

Upvotes: 2

Related Questions