I'm working on converting from XML to Vue.js templates.
However, I ran into trouble when I tried to create Vuetify's v-tooltip component.
This XSLT code:
<xsl:element name="v-tooltip">
<xsl:attribute name="bottom"/>
<xsl:element name="template">
<xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute>
<xsl:element name="v-icon">
<xsl:attribute name="v-bind">attrs</xsl:attribute>
<xsl:attribute name="v-on">on</xsl:attribute>
mdi-home
</xsl:element>
</xsl:element>
<xsl:element name="span">ToolTip</xsl:element>
</xsl:element>
Estimated generation:
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
But it causes an error due to colon in <xsl:attribute name="v-slot:activator">
When I remove the colon like <xsl:attribute name="v-slotactivator"> I confirm that the XSLT transformation occurs, so the only cause of the error is definitely the colon.
Several other articles point out using variant inserts like <xsl:attribute name="v-slot:activator"> :activator<xsl:text> or <xs l :text disable output escape="yes" ">v-slot:activator<xsl:text>, or name ="{concat('v-slot',':','activator')}", none of them work.
Thanks,
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Actually, I kind of figured it out on my own, although this is more of a workaround.
I use XSLTProcessor in JS to generate Vue.js code. By using this class I can get the DOM as the conversion result. I managed to manipulate DOM after XSLT transformation.
This is what I did:
First, in the XSLT code, I added an
idattribute with a value ofvslot(for example) to thetemplateelement. In short, I replaced<xsl:attribute name="v-slot:activator">{ on , attrs}</xsl:attribute>with<xsl: attribute name="id">vslot</xsl:attribute >.Secondly, in the JS code, I changed the attribute and value using the
setAttribute()method with theidvalue set in the XSLT (andremoveAttribute()method and remove theidattribute) as follows:var xsltProcessor = new XSLTProcessor() xsltProcessor.importStylesheet(xsl) var doc = xsltProcessor.transformToDocument(xml) doc.getElementById('vslot').setAttribute('v-slot:activator','{ on, attrs }') doc.getElementById('vslot').removeAttribute('id') var result = doc.documentElement.outerHTMLAnd, voila!
v-iconappears on the browser andv-tooltipis working!