I am using vue3-runtime-template to render a vue code converted from xml. The code is the following:
<template>
<v-container>
<v-runtime-template :template="text"></v-runtime-template>
</v-container>
</template>
<script>
import xmlStr from '../assets/sample.xml'
import xslStr from '../assets/sample.xsl'
import VRuntimeTemplate from "vue3-runtime-template"
export default {
name: 'Edition',
components: {
VRuntimeTemplate,
},
data: () => ({
text: `<div>{{ getConvertedText }}</div>`,
}),
computed: {
getConvertedText() {
var xml = new DOMParser().parseFromString(xmlStr, 'text/xml')
var xsl = new DOMParser().parseFromString(xslStr, 'text/xml')
var xsltProcessor = new XSLTProcessor()
xsltProcessor.importStylesheet(xsl)
return xsltProcessor.transformToDocument(xml).documentElement.outerHTML
},
},
}
</script>
When I run this code, I get an error, Property "getConvertedText" was accessed during render but is not defined on instance.
It does not work though I am pretty sure that I followed the documentation. I currently run on vue-cli, and I don't get any compile errors on the terminal, which should mean that the plugin itself is properly installed. It would be great if anyone knows what's wrong.
Instead of using vue3-runtime-template, I managed to embed the converted code to the parent template by returning an entire component.
I chose to copy to a global variable that is registered as a Vue component, rather than using a return value of the method.
<template>
<v-container>
<convertedTemplate/>
</v-container>
</template>
var convertedTemplete = {
template: '<div></div>'
}
<script>
import xmlStr from '../assets/sample.xml'
import xslStr from '../assets/sample.xsl'
export default {
name: 'Edition',
components: {
convertedTemplete,
},
computed: {
getConvertedText() {
var xml = new DOMParser().parseFromString(xmlStr, 'text/xml')
var xsl = new DOMParser().parseFromString(xslStr, 'text/xml')
var xsltProcessor = new XSLTProcessor()
xsltProcessor.importStylesheet(xsl)
convertedTemplate = {
template: "<div>xsltProcessor.transformToDocument(xml)
.documentElement.outerHTML</div>",
}
},
},
}
</script>
But this code cannot render the converted child component at the same timing as the parent component is loaded. It is necessary to trigger the method after the parent is rendered. Actually, I have not checked if the code above really works since I am recently working on my project with a CDN version of Vue.js, not a Vue-Cli one. With the CDN version, I have to make the getConvertedText() method async since I need to use fetch() methods to import files, which makes the coding strategy so different. But, I guess, in a Vue-Cli version, without the async method, if we move the getConvertedText() method to created: it might render as soon as the parent component is called.