vuejs2 dynamic css mit dynamischem html

Question

Ein Plugin, das ich benutze erstellt dynamische HTML und ich möchte eine dynamische background-color mit einem Hex über Requisiten übergeben.

Dies ist der HTML-Code in meiner Komponente

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

dynamische HTML dieser

Generiert

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

Die Komponenten erhält Requisiten

props: ['primaryBgColor'] 

ich natürlich die Farbe in der Vorlage sehen können wenn ich schreibe

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

Jedoch, wenn ich einen Stil innerhalb der Komponente wie

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

Webpack schreiben gibt eine Fehlermeldung, dass ich ein CSS-Syntaxfehler habe. Irgendwelche Ideen?

Answer 1

in Ihrer Vorlage können Sie direkt Stil

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

primaryBgColor sollte Objekt wie {'background':"#cccc"}

Für weitere Option enthalten injizieren, vuejs hervorragende Dokumentation hatte. Sie können https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

beziehen wir das Element abfragen und Stil anwenden wie wie folgt

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 
     } 
    }, 

Answer 2

der suresh Antwort nicht, wie es hört kann arbeiten, um die Vue Ereignis montiert ist, sondern durch die Zeit Vue Komponente montiert ist, Das Plugin-Element wurde möglicherweise noch nicht injiziert.

Wenn das Plugin ein ähnliches Ereignis bietet, können Sie den Handler dort registrieren. Wenn nicht, können Sie das äußere Domelement stattdessen mit MutationObserver anhören.

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