Question T19813
Visible to All Users

Error displaying SurveyCreator and Form Library

created 4 months ago

I am using the 'Survey Form Library' and the 'Survey Creator' in a Vue2 application. At certain points, I need to display both the form library and the survey creator. The survey creator displays correctly, but when I try to show the form library, some errors occur, and the form library does not appear on the screen. When using the inspect element, there is a div with the class 'sd-body' and the id = '[object Object]' Could you help me resolve this issue? I'm not sure if I'm doing it correctly. vue=2.7.14 survey=1.11.11

JavaScript
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'description')" found in ---> <Page> at src/vue/page.vue <Survey> at src/vue/survey.vue <MyFirstSurvey> at /src/components/MyFirstSurvey.vue <App> at /src/App.vue <Root>

https://codesandbox.io/p/sandbox/surveyjs-and-surveycreator-test-fjs6xk

Answers approved by surveyjs Support

created 4 months ago

Hello,
In Vue2 apps, you use the SurveyJS Creator for Knockout. Therefore, to ensure compatibility between SurveyJS packages, instead of using survey-vue-ui, please integrate the Knockout integration of SurveyJS Form Library. So, you need to use the following packages:

  • survey-core
  • survey-creator-core
  • survey-creator-knockout
  • survey-knockout-ui

I updated a list of packages in your demo and modified the MyFirstSurvey.vue component.

JavaScript
<template> <div id="survey" /> </template> <script> import "survey-core/defaultV2.min.css"; import { Survey } from "survey-knockout-ui"; export default { mounted() { const surveyJson = { title: "Formulário de submissão de proposta", description: "Formulário de submissão de proposta de projeto", logoPosition: "right", pages: [ { name: "dados_basicos", elements: [ { type: "text", name: "titulo_projeto", title: "Título do Projeto", isRequired: true, requiredErrorText: "Preenchimento obrigatório", }, ], title: "Dados Básicos da Proposta - Test", }, ], showTitle: false, showCompletedPage: false, storeOthersAsComment: false, clearInvisibleValues: "none", completeText: "Salvar", }; const surveyData = { titulo_projeto: "Lorem ipsum dolor sit amet", }; const survey = new Survey(surveyJson); survey.data = surveyData; survey.render("survey"); }, }; </script>

View Demo
Let me know if you have any questions.