Not able to render a form json - getting errors

rawker120

created 2 years ago (modified 2 years ago)

Hi,

I am trying to follow the documentation for rendering a form using vue, but i am getting errors like :-

[Vue warn]: Unhandled error during execution of render function
at <Survey2 survey= SurveyModel2 {dependencies: {…}, propertyHash: {…}, eventList: Array(92), isLoadingFromJsonValue: false,

my codes are like :-
1. Surveyviewpage.vue

JavaScript
<template>
   <Survey :survey="survey" />
  </template>

  <script>
  const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};
  import {  Model } from 'survey-core';
  import { Survey } from 'survey-vue-ui';
  export default {
    components: {
    Survey
  },
    data() {
      const survey = new Model(surveyJson);
      return {
        survey
      }
    },
  }
  </script>

main.js->

JavaScript
import 'bootstrap/dist/css/bootstrap.css';
import { createApp } from "vue";
import axios from 'axios';
import store from './store';
import App from './App.vue';
import router from './router';
const cors = require("cors");
const app = createApp(App);
Vue.config.productionTip = false
// axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:8003';  // the FastAPI backend
axios.interceptors.response.use(undefined, function (error) {
    if (error) {
      const originalRequest = error.config;
      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        store.dispatch('logOut');
        return router.push('/login')
      }
    }
  });
app.use(router);
app.use(store);
app.use(cors());
app.mount("#app");

can you please help

Comments (3)

Jane 2 years ago

Hello,
Thank you for sharing the code. I cannot seem to locate any issues with this code. I'm sending you a demo that shows how to integrate a Form Library for Vue 2 using the survey-vue-ui package: View CodeSandbox. Please let me know if this example can help you determine the cause of the error on your end.

Please share your results with me.

rawker120 2 years ago

Hi ,

I have a quasar framework and using vue3. I went through the docs and implemented the vue3 process. My code is as below:

Main.js:

Code
import 'bootstrap/dist/css/bootstrap.css';
import { createApp } from "vue";
import axios from 'axios';
import store from './store';
import App from './App.vue';
import router from './router';
import { surveyPlugin } from 'survey-vue3-ui';
const cors = require("cors");
const app = createApp(App);
Vue.config.productionTip = false
// axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:8003';  // the FastAPI backend
axios.interceptors.response.use(undefined, function (error) {
    if (error) {
      const originalRequest = error.config;
      if (error.response.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;
        store.dispatch('logOut');
        return router.push('/login')
      }
    }
  });
app.use(router);
app.use(store);
app.use(cors());
app.use(surveyPlugin)
app.mount("#app");

package.json:

Code
{
  "name": "frontend",
  "version": "0.0.1",
  "description": "Frontend",
  "productName": "****",
  "author": "Rakesh",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0",
    "dev": "quasar dev",
    "build": "quasar build"
  },
  "dependencies": {
    "@quasar/extras": "^1.16.4",
    "axios": "^1.2.1",
    "cors": "^2.8.5",
    "quasar": "^2.6.0",
    "survey-vue3-ui": "^1.9.114",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.3.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "postcss": "^8.4.14",
    "prettier": "^2.5.1",
    "sass": "1.32.12"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

surveyview.vue

Code
<script >
import 'survey-core/defaultV2.min.css';
import { Model } from 'survey-core';

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

const survey = new Model(surveyJson);
</script >

<template>
  <SurveyComponent :model="survey" />
</template>

the error now am getting is:
[Vue warn]: Failed to resolve component: SurveyComponent If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <SurveyViewPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <QPageContainer> at <QLayout view="hHh lpR fFf" class="bg-grey-1" > at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <App>

and i can see only a blank screen

Jane 2 years ago

Hello,
Thank you for your update. Please follow the steps outlined within this topic and ensure you correctly integrated a SurveyJS Form Library to your Vue 3 app: Add a Survey to a Vue 3 Application. Pay special attention to the Render the Survey section.

Please let me know how it goes.

Not able to render a form json - getting errors

Recently viewed tickets