Блог

Главная - Вопросы по программированию - Используя vue3-runtime-template, я получаю сообщение об ошибке: «Свойство «xxx» было доступно во время рендеринга, но не определено в экземпляре»

Используя vue3-runtime-template, я получаю сообщение об ошибке: «Свойство «xxx» было доступно во время рендеринга, но не определено в экземпляре»

#javascript #vue.js #xslt #vuejs3

Вопрос:

Я использую vue3-runtime-template для рендеринга кода vue, преобразованного из xml. Код следующий:

 <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>

Когда я запускаю этот код, я получаю сообщение об ошибке, Property "getConvertedText" was accessed during render but is not defined on instance .
Это не работает, хотя я почти уверен, что следовал документации. В настоящее время я работаю на vue-cli, и я не получаю никаких ошибок компиляции в терминале, что должно означать, что сам плагин установлен правильно. Было бы здорово, если бы кто-нибудь знал, что не так.

Комментарии:

1. Я никогда не использовал vue.js , увидел вопрос только из-за тега xslt. Сначала я бы попытался установить getConvertedText() { return new Date().toString(); } , работает ли простое, а затем работает ли возврат HTML getConvertedText() { return '<p>This is a test: ' new Date().toString() '</p>'; } .

2. Спасибо, Мартин! Однако мне уже удалось запустить getConvertedText() метод и преобразовать XML-файл с помощью XSLT другим способом кодирования на Vue.js . Итак, проблема, я думаю, в том, что Vue.js приложение не может вызвать getConvertedText() метод через плагин vue3-runtime-template.

Ответ №1:

Вместо использования vue3-runtime-template мне удалось встроить преобразованный код в родительский шаблон, вернув весь компонент. Я решил скопировать в глобальную переменную, которая зарегистрирована как компонент Vue, вместо того, чтобы использовать возвращаемое значение метода.

 <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>

Но этот код не может отображать преобразованный дочерний компонент одновременно с загрузкой родительского компонента. Необходимо запустить метод после рендеринга родительского элемента. На самом деле, я не проверял, действительно ли приведенный выше код работает, поскольку я недавно работаю над своим проектом с CDN-версией Vue.js , а не Vue-Cli. С версией CDN я должен сделать getConvertedText() метод асинхронным, поскольку мне нужно использовать fetch() методы для импорта файлов, что сильно отличает стратегию кодирования. Но, я думаю, в версии Vue-Cli без метода async, если мы переместим getConvertedText() метод created: , он может отображаться сразу после вызова родительского компонента.

Метки: , ,