XSLT を使用して Vue.js コンポーネントを作成する場合のコロンの問題

Question

XML から Vue.js テンプレートへの変換に取り組んでいます。 ただし、Vuetify の v-tooltip コンポーネントを作成しようとしたときに問題が発生しました。

この XSLT コード:

リーリー

推定世代数:

リーリー

ただし、<xsl:属性名="v-slot:activator">のコロンによりエラーが発生します。 <xsl:attribute name="v-slotactivator"> のようにコロンを削除すると、XSLT 変換が発生することが確認できるため、エラーの唯一の原因は間違いなくコロンです。

他のいくつかの記事では、<xsl:attribute name="v-slot:activator"> :activator<xsl:text> または < のようなバリアント挿入の使用を指摘しています。 xs l :text 出力エスケープ="yes" ">v-slot:activator<xsl:text>、または name ="{concat('v-slot',':','activator) ')}"、どれも機能しません。

この問題に対する解決策はありますか?それとも単純にそれができないのでしょうか？

＃＃＃ありがとう、＃＃＃

Answer 1

実は、これは回避策のようなものですが、私は自分でそれを考え出しました。

JS で XSLTProcessor を使用して Vue.js コードを生成します。このクラスを使用すると、変換結果として DOM を取得できます。 XSLT変換後のDOMを操作することができました。

これが私がやったことです:

まず、XSLT コードで、値 vslot (たとえば) を持つ id 属性を template 要素に追加しました。つまり、 <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> を <xsl:attribute name= に置き換えました。 「id」>vslot。

2 番目に、JS コードで、XSLT (および removeAttribute() で設定された id 値を持つ setAttribute() メソッドを使用して属性と値を変更しました。 メソッドを作成し、id 属性を削除します)。次のようにします。 リーリー

そして、出来上がりです！

v-icon がブラウザに表示され、v-tooltip が機能しています。