hueのエスケープvueコンポーネント

Question

私はcomponent/HTML exampleのペアでテーブルを作るのに苦労しています。ここで

は、（それが動作しません）私がやったことの一例です：

<td> 
    <vm-three-state-checkbox-filter 
     name="three-checkbox" 
    ></vm-three-state-checkbox-filter> 
</td> 
<td v-pre> 
    <pre> 
     <vm-three-state-checkbox-filter 
      name="three-checkbox" 
     ></vm-three-state-checkbox-filter> 
    </pre> 
</td> 

そして、ここではその結果です： あなたは右の私には、レンダリングされたコンポーネントを見ることができます左ワンには何も提示されていないのではなく、生のHTMLが見えます。

エスケープされたHTMLをdataという文字列で指定できますが、これは動作します（デフォルトではvueは文字列をエスケープします）。しかし、テンプレートでそれを行うことをお勧めします。

ありがとうございました。

Answer 1

v-preディレクティブは、Vueがその要素内で何かをコンパイルするのを防ぎます。

あなたの<vm-three-state-checkbox-filter>要素はテンプレートのままでそのままブラウザに残り、有効なHTML要素ではないため、ブラウザに何も表示されません。

v-preは何もHTMLエスケープしません。 Vueは、Vueテンプレートコードのコンポーネント（コンポーネント、ディレクティブ、ひげそり{{}}タグ）をコンパイルしないようにします。

HTML要素をエスケープされた文字列に変換する小さなカスタムディレクティブ（terminal: trueoptionを有効にする）を書くことができますが、それは私がその場で一緒に投げることはできません。

Answer 2

タグでエスケープしていないHTMLコード。