SVG内部で更新していないVue口ひげ<text>

Question

<text>内のテキストが更新されていない理由を誰でも説明できますか？

https://codepen.io/guanzo/pen/LyjdKq?editors=1010

私が代わりに口ひげ構文のv-html="currentText"を使用するときに動作します。

Answer 1

口ひげ構文はVUEでサポートされていない〜2.0

ダブル口髭はプレーンテキストではなく、HTMLとしてデータを解釈します。出力実際のHTMLするためには、V-HTMLディレクティブを使用する必要があります。

<div v-html="rawHtml"></div> 

内容はプレーンなHTMLとして挿入されている - データバインディングが無視されます。 Vueは文字列ベースのテンプレートエンジンではないので、テンプレートパーシャルを作成するためにv-htmlを使用することはできません。その代わりに、UIの再利用と構成の基本単位としてコンポーネントが優先されます。

https://vuejs.org/v2/guide/syntax.html#Raw-HTML

https://vuejs.org/v2/api/#v-html