Estoy usando vue3-runtime-template para generar un código vue convertido de xml. El código es el siguiente:
<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> Cuando ejecuto este código, aparece un error, Property "getConvertedText" was accessed during render but is not defined on instance . No funciona, aunque estoy bastante seguro de que seguí la documentación . Actualmente ejecuto vue-cli y no obtengo ningún error de compilación en el terminal, lo que debería significar que el complemento en sí está instalado correctamente. Sería genial si alguien sabe lo que está mal.
En lugar de usar vue3-runtime-template , logré incrustar el código convertido en la plantilla principal devolviendo un componente completo. Elegí copiar a una variable global que está registrada como un componente Vue, en lugar de usar un valor de retorno del método.
<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> Pero este código no puede representar el componente secundario convertido al mismo tiempo que se carga el componente principal. Es necesario activar el método después de representar el padre. En realidad, no he comprobado si el código anterior realmente funciona, ya que recientemente estoy trabajando en mi proyecto con una versión CDN de Vue.js, no una versión de Vue-Cli. Con la versión CDN, tengo que hacer que el método getConvertedText() asíncrono ya que necesito usar métodos fetch() para importar archivos, lo que hace que la estrategia de codificación sea muy diferente. Pero, supongo, en una versión de Vue-Cli, sin el método asíncrono, si movemos el método getConvertedText() a created: podría mostrarse tan pronto como se llame al componente principal.