jsonforms-vue-seed
jsonforms-vue-seed copied to clipboard
Vue Error: TypeError: Cannot read properties of undefined (reading 'code')
Hi I got the error while using the package of jsonforms with vue2 seed. Also I've used vue2 with laravel 5.8.
Encountering a TypeError: Cannot read properties of undefined (reading 'code') error in Vue 2 application using JSONForms when processing dynamic form data.
Below are my package.json file:
Loading form schema... Requirements Please help me figure out this error.{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production NODE_OPTIONS='--openssl-legacy-provider' node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "storybook": "start-storybook -p 9000" }, "devDependencies": { "axios": "^0.19", "bootstrap": "^4.1.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.6.14", "vue-template-compiler": "^2.6.14" }, "dependencies": { "@jsonforms/core": "^2.4.0", "@jsonforms/vue2": "^2.4.0", "@jsonforms/vue2-vanilla": "^2.4.0", "@vue/composition-api": "^1.7.2", "ajv": "^6.12.6", "ajv-formats": "^1.5.1", "core-js": "^3.6.5", "regenerator-runtime": "^0.14.1", "tslib": "^2.8.1", "uuid": "^9.0.0" } }
Below my component code:
`
`
<!-- Tab Content -->
<div class="tab-content">
<!-- All Fields Tab -->
<div v-if="activeTab === 'all'" class="tab">
<h3>All Fields Tab</h3>
<div v-if="isSchemaReady && uiSchema" class="form-container">
<json-forms
v-bind:uischema="uiSchema"
v-bind:schema="effectiveSchema"
v-bind:ajv="schemaValidator"
v-bind:renderers="renderers"
v-bind:data="data"
@change="onChange"
/>
</div>
<div v-else class="no-form-message">
<p>No form available. Check console for errors.</p>
</div>
</div>
<!-- Required Fields Tab -->
<div v-if="activeTab === 'required'" class="tab">
<h3>Required Fields Tab</h3>
<div v-if="!requiredUiSchema" class="fallback-message">
<p>Required fields view is not available. Showing all fields instead.</p>
</div>
<div v-if="isSchemaReady && (requiredUiSchema || uiSchema)" class="form-container">
<json-forms
v-bind:uischema="requiredUiSchema || uiSchema"
v-bind:schema="effectiveSchema"
v-bind:ajv="schemaValidator"
v-bind:renderers="renderers"
v-bind:data="data"
@change="onChange"
/>
</div>
<div v-else class="no-form-message">
<p>No form available. Check console for errors.</p>
</div>
</div>
</div>
</div>
</div>