vuejs2 dynamic css with dynamic html

Question

A plugin I use creates dynamic html and I want to add a dynamic background-color using a hex passed via props.

This is the html in my component

<template>
  <div class="pagination" slot="pagination"></div>
</template>

Generates dynamic HTML of this

<div class="pagination" slot="pagination">
  <span class="swiper-pagination-bullet"></span>
  <span class="swiper-pagination-bullet"></span>
</div>

The components receives props

props: ['primaryBgColor']

I can obviously see the color in the template if I write

<template>
  <div>
    {{ this.primaryBgColor }}
  </div>
</template>

However when I write a style within the component like

<style>
  .swiper-pagination-bullet {
    background-color: {{ this.primaryBgColor }}
  }
</style>

Webpack returns an error saying I have a CSS syntax error. Any ideas?

I haven't seen any framework which would support dynamically generating CSS classes based on JS. This doesn't even sound like a good practice. Simply just apply inline styles in my opinion which are completely valid in context of such frameworks, especially for such dynamic coloring stuff. — Zoltán Tamási
– Zoltán Tamási, Commented Sep 11, 2017 at 5:08
I would add inline style, but the HTML doesn't exist in the template file because it is injected by the plugin. — thedanotto
– thedanotto, Commented Sep 11, 2017 at 5:10
"I would love to write a style within the component but I haven't been able to get that to work". What doesn't work about it? If you can write {{ this.primaryBgColor }} and have it output your color, why should it break when you wrap it in a class name inside style tags? — ESR
– ESR, Commented Sep 11, 2017 at 5:45
@EdmundReed webpack cannot interpolate the variable. It says my CSS contains a syntax error. — thedanotto
– thedanotto, Commented Sep 11, 2017 at 5:58

cwang · Accepted Answer · 2017-09-11 06:36:25Z

1

suresh's answer may not work as it listens to the Vue mounted event, but by the time Vue component mounted, the plugin element may not yet be been injected.

if the plugin provides a similar event, you can register the handler there. if not, you can listen to the outer dom element using MutationObserver instead.

<template>
  <div id="outer">
  </div>
</template>
<script>
    const observer = new MutationObserver(mutations => {
       // suresh's function here
    });
    observer.observe(document.getElementById('outer'), { childList: true });
</script>

answered Sep 11, 2017 at 6:36

cwang

1,10411 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 02:27:27Z

1

In your template, you can directly inject style

<template>
  <div :style="this.primaryBgColor">
    {{ this.primaryBgColor }}
  </div>
</template>

primaryBgColor should contain object like {'background':"#cccc"}

For more option, vuejs had superb documentation. you can refer https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

We can query the element and apply style like as follows

mounted: function () {
      var elems = document.querySelectorAll('.swiper-pagination-bullet ')
      var index = 0
      var length = elems.length
      for (; index < length; index++) {
        elems[index].style.backgroundColor = this.primaryBgColor
      }
    },

edited Jul 15, 2022 at 2:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 11, 2017 at 5:40

Suresh Velusamy

2,40820 silver badges24 bronze badges

4 Comments

thedanotto Over a year ago

Thanks for your answer, however, I need the CSS applied to the span elements, not the div.

thedanotto Over a year ago

And I do not have access to the span elements within my template file because they are injected by a plugin.

Suresh Velusamy Over a year ago

Updated my answer, check it

thedanotto Over a year ago

Awesome, I will test it out first thing tomorrow.

Collectives™ on Stack Overflow

vuejs2 dynamic css with dynamic html

2 Answers 2

Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Related