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) ')}"、どれも機能しません。
＃＃＃ありがとう、＃＃＃
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
実は、これは回避策のようなものですが、私は自分でそれを考え出しました。
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が機能しています。