XSLT를 사용하여 Vue.js 구성 요소를 만들 때 콜론 문제

Question

XML을 Vue.js 템플릿으로 변환하는 중입니다. 그런데 Vuetify의 v-tooltip 컴포넌트를 만들려고 할 때 문제가 발생했습니다.

이 XSLT 코드:

으아악

예상 세대:

으아악

하지만 <xsl:attribute name="v-slot:activator">에 콜론으로 인해 오류가 발생합니다. <xsl:attribute name="v-slotactivator">와 같이 콜론을 제거하면 XSLT 변환이 발생하는 것을 확인하므로 오류의 유일한 원인은 확실히 콜론입니다.

다른 여러 기사에서는 <xsl:attribute name="v-slot&colon;activator"> 一样，使用变体插入 <xsl:text>v-slot:activator<xsl:text> 或 <xs l：文本禁用输出转义=“是” “>v-slot:activator<xsl:text>，或 name="{concat('v-slot',':','activator')}"와 같은 것을 사용하여 지적했지만 어느 것도 작동하지 않습니다.

이 문제에 대한 해결책이 있나요? 아니면 그냥 할 수 없나요?

감사합니다

Answer 1

이것은 해결 방법에 가깝지만 실제로는 스스로 알아냈습니다.

JS에서 XSLTProcessor를 사용하여 Vue.js 코드를 생성합니다. 이 클래스를 사용하면 DOM을 변환 결과로 얻을 수 있습니다. XSLT 변환 후 DOM을 조작했습니다.

내가 한 일은 다음과 같습니다.

먼저 XSLT 코드에 template 元素添加了一个值为 vslot（例如）的 id 属性。简而言之，我将 <xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute> 替换为 <xsl:attribute name="id">vslot</xsl:attribute >를 추가합니다.

두 번째로 JS 코드에서는 setAttribute() 方法和 XSLT 中设置的 id 值更改了属性和值（以及 removeAttribute() 方法以及删除 id 속성을 다음과 같이 사용합니다.

으아아아

그리고, 짜잔! v-icon 出现在浏览器上，并且 v-tooltip 지금 일해요!