[Vuejs]-Vuejs2 dynamic css with dynamic html

by

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
      }
    },
👤Suresh Velusamy

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>
👤cwang

Leave a comment