[Vuejs]-Using vue3-runtime-template, I get an error, "Property "xxx" was accessed during render but is not defined on instance"

by

0👍

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.

Leave a comment