Vue.js：動的に作成されたHTMLでスコープ設定されたCSSを使用するにはどうすればよいですか？

Question

ショートバージョン：

私は、コンポーネントのメソッドでHTMLの文字列を生成しています、と私はそれがスコープのためのデータ属性が欠落しているため、スコープCSSでそのHTMLのスタイルを設定する方法を見つけ出すことはできません。

少し長いバージョン：

私は、文字列を受け取り、検索語のすべての出現を含むHTML文字列は<span class="match">に囲まれた意味、強調表示返すハイライトと呼ばれる機能を持っています。しかし、私はこれを文字列で手動でやっているので、そのスパンは私のVueコンポーネントのスコープ付きCSSが動作する必要がある特別なデータ属性を取得しないので、それらのスタイルをスタイルするための唯一の方法は、スコープではありません。私はこれをする必要はありません。これを行うためのVue固有の方法がありますか？ 関数は次のようになります。

// Source: http://stackoverflow.com/a/280805/2874789 
function highlight(data, search) { 
    return data.replace(
     new RegExp("(" + preg_quote(search) + ")", 'gi'), 
     "<span class=match>$1</span>" 
    ); 
} 

おかげで（preg_quoteだけでエスケープする必要があるものをエスケープ機能です）！

Answer 1

これは興味深いものです。

scopedのスタイルだけではこれにどう対処するのか分かりませんが、私は、<style>要素を追加して（これもスコープしています）要素をハックすることができます。

私は次のように考えていた：あなたが行うことができます置き換える機能で、その後

<style scoped> 
    ... 
</style> 

<style module> 
    .match { 
    color: red; 
    } 
</style> 

：

`<span class="${this.$style.match}">...</span>` 

あなたがここにVUE-ローダのCSSモジュールのサポートについての詳細を読むことができます：

http://vue-loader.vuejs.org/en/features/css-modules.html

Answer 2

動的に生成されるコンテンツ v-htmlで作成されたDOMコンテンツは、スコープ付きスタイルの影響を受けませんが、深い セレクタを使用してスタイルを変更することはできます。

VueJS固有の方法はありません。あなたの最善の選択肢は、ハイライト関数の出力でインラインでスタイルを設定するか、グローバルクラスを使うことです。

function highlight(data, search) { 
    return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'), 
    "<span class=match>$1</span>" 
    ); 
} 


<style> 
    .match { 
    color: yellow; 
    } 
</style> 

または

function highlight(data, search) { 
    return data.replace(
    new RegExp("(" + preg_quote(search) + ")", 'gi'), 
    "<span style="{ color: yellow }">$1</span>" 
    ); 
} 

また深いセレクタを試すことができますが、私は自分自身にそれらに精通していないです。

https://vue-loader.vuejs.org/en/features/scoped-css.html