In my Vue project, I am using a v-for loop to create spans and applying different styles. The current setup successfully applies 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>
Now, I want to add a second styling for text colour but I'm having trouble making it work. When I change the span style to the following, there are no errors or any visible styling changes:
:style="`background-color: ${tagsText[group].color}`, `text-light`">
The same issue occurs with:
:style="`background-color: ${tagsText[group].color}`, `text-${tagsText[group].text}`">