Array of Objects - When adding a new object - TypeError: Cannot add property _Ctor, object is not extensible

[Gypson]

Describe the bug When i try to add a Array of Objects like the example in the docs

array: { type: "array", title: "Users", items: { type: "object", properties: { name: { type: "string", title: "Username", }, }, }, },

If i click the plus icon I get this error and none of the properties display

vue.runtime.esm.js:5143 Uncaught (in promise) TypeError: Cannot add property _Ctor, object is not extensible at Function.Vue.extend (vue.runtime.esm.js:5143) at ensureCtor (vue.runtime.esm.js:3598) at vue.runtime.esm.js:3665 at vue.runtime.esm.js:336

[Gypson]

https://codesandbox.io/s/vue-jsonschema-form-basic-example-zid04?fontsize=14&hidenavigation=1&module=/src/App.vue&theme=dark&file=/src/App.vue

Use the code from the demo { "type": "object", "properties": { "array": { "type": "array", "title": "Users", "items": { "type": "object", "properties": { "name": { "type": "string", "title": "Username" } } } } } }

You will see the _Ctor error

[m0un10]

It's interesting that on the website example it works in the browser, but when you copy the JSON schema in to the code sandbox it doesn't. There must be something fundamentally different between the sandbox and the website setup/dependencies. I wish I could determine the fix and contribute back. So far, no luck :(

[jmalley]

Did you ever fix this?

[Ghazaleh-Graziella]

Did you ever fix this?

Hi I have the same problem.do you have any idea to fix it?

[AndreMicheletti]

Same here, no luck yet. @roma219 could you kindly take a look at this?

On the demo page is working, but when we try to use it on our projects, it just gives this "Ctor" error.

[roma219]

Sorry guys, been busy with other stuff and kinda abandoned the project. But I’ll take a look tomorrow.

[AndreMicheletti]

Sorry guys, been busy with other stuff and kinda abandoned the project. But I’ll take a look tomorrow.

No problem. I totally get it.

For now, I was able to make it work by creating a component FieldList.vue that works pretty much the same as in the original library component for lists and adding this component to the ComponentConfigs

const componentConfig = [
  {
    componentName: 'FieldList',
    matcher: { type: 'array' },
    eventName: 'input'
  },
]

Note: in order for that to work, you'll need to use the lib component JsonSchemaForm directly. But since this component is not exported, I managed to make it work using this workaround:

At the js entry file, where your Vue.js is configured:

import JsonSchema from "@roma219/vue-jsonschema-form";

// Extract components from library
Vue.component('JsonSchemaForm', JsonSchema.options.components.JsonSchemaForm);

This is what my component look like: AndreMicheletti/FieldList.vue