javascript - vuejs2 dynamic css with dynamic html -

a plugin use creates dynamic html , want add dynamic background-color using hex passed via props.

this html in 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 see color in template if write

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

however when write style within component like

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

webpack returns error saying have css syntax error. ideas?

in template, can directly inject style

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

primarybgcolor should contain object {'background':"#cccc"}

for more option, vuejs had superb documentation. can refer https://vuejs.org/v2/guide/class-and-style.html#object-syntax-1

we can query element , apply style follows

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