Editor doesnt appear in Vue application

[samlotti2]

Version(if relevant): 7.5.0

vue-schema-based-json-editor": "^7.5.0" vue-template-compiler": "^2.5.16"

Environment(if relevant):

Mac Chrome VueJS 2.4.2

Code(if relevant):

<json-editor :schema="schema" :initial-value="value" @update-value="updateValue($event)" theme="bootstrap3" icon="fontawesome4" :locale="locale" :dragula="dragula" :markdownit="markdownit" :hljs="hljs" :force-https="false">

// code here

Expected:

I am trying to use the json editor in Vue JS. I provided the schema and data but nothing is appearing. I created a minimal application and attached it.

I did review the sample application code but it appears it has already been packaged so i minimized and unreadable.

Actual:

The editor is not appearing on the screen. I placed text above and below, see my text but no editor. No Error message

vue_schema.zip

[plantain-00]

There is some errors:

1. schema is the schema object rather than then schema string: https://github.com/plantain-00/schema-based-json-editor#properties-and-events-of-the-component
2. dragula, markdownit, hljs, locale are not imported in your example
3. you should import bootstrap3 and fontawesome4 css to get it styled

[shagabay]

hi,

i'm also having difficulties with component not being visible. i would appreciate if you could give example code for those 3 things you've mentioned. more specifically:

1. what is the Schema object you've mentioned? is it something standard? i looked it up but couldn't figure what is this object.

2. how do i import css so that the editor can use it.

thanks!

[plantain-00]

In your example, you are using:

schema: `{
  "title": "Person",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    },
    "age": {
      "description": "Age in years",
      "type": "integer",
      "minimum": 0
    }
  },
  "required": [
    "firstName",
    "lastName"
  ]
}`

you can change to:

schema: {
  "title": "Person",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    },
    "age": {
      "description": "Age in years",
      "type": "integer",
      "minimum": 0
    }
  },
  "required": [
    "firstName",
    "lastName"
  ]
}

you can import css like: https://github.com/plantain-00/schema-based-json-editor/blob/master/packages/vue/demo/index.ejs.html#L7

[samlotti2]

Thank you, the string was the issue.