動的htmlのvuejs2動的CSS

Question

私が使用するプラグインは動的HTMLを作成し、動的なbackground-colorを追加したいのですが、これは小道具を介して渡された16進数を使用しています。

これは

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

この

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

のダイナミックHTMLコンポーネントは、私が明らかにテンプレートの色を見ることができます小道具

props: ['primaryBgColor'] 

を受けて生成し、私のコンポーネントでhtmlです書く場合は

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

私は

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

のようなコンポーネント内のスタイルを書くときしかし、WebPACKのは、私はCSSの構文エラーを持っているというエラーが返されます。何か案は？ primaryBgColorはもっとオプションについて {'background':"#cccc"}

のようなオブジェクトが含まれている必要があり

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

テンプレートで

Answer 1

、あなたが直接スタイルを注入することができ、vuejsは見事な文書を持っていました。あなたは、Vueの部品が取り付けられた時間ではなく、https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

我々は要素を照会し、Vueのイベントをマウントすることがリッスンするよう

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

Sureshさんの答えは動作しないことがあり、次のようにのようにスタイルを適用することができます参照することができますプラグイン要素がまだ注入されていない可能性があります。

プラグインで同様のイベントが発生した場合は、そこにハンドラを登録できます。もしそうでなければ、代わりにMutationObserverを使って外側のDOM要素を聞くことができます。

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