Vue: <json-editor> not showing up

[dddpt]

Hi all!

First thanks for the promising package, I would love to use it but sadly I don't succeed in having the simplest example work. I am new to Vue, so maybe I am doing some newbie error. Let me know, happy to learn!

Version: 8.3.0 (also tested on 7)

package.json:

{
  "dependencies": {
    "vue": "^2.6.11",
    "vue-schema-based-json-editor": "^8.3.0",
  }
}

Code:

App.vue:

<template>
<div>
  <h2>test the json-editor</h2>
  <p>Upload a new model to the server</p>
  <json-editor :schema="schema"
    :initial-value="initialValue"
    @update-value="updateNumberExample($event)"
    theme="bootstrap5"
    icon="fontawesome4">
  </json-editor>
  <p>p post json-editor </p>
</div>

</template>

<script>
//import { ArrayEditor, ObjectEditor, JSONEditor } from "vue-schema-based-json-editor";

export default {
    name: 'App',
    components: {
            //ArrayEditor, ObjectEditor, JSONEditor
    },
    data() {
        return {
      schema: {
        "numberExample": {
          "type": "number",
          "title": "A number example",
          "description": "a number description example",
          "default": 123.4,
          "minimum": 10,
          "exclusiveMinimum": true,
          "maximum": 1000,
          "exclusiveMaximum": true
        }
      },
      initialValue: {
        numberExample: 123.4
      },

        };
    },
    methods: {
    updateNumberExample(c){
      console.log("updateNumberExample value:", c)
    },    
  },
  mounted(){
    console.log("JSONEditor")
    console.log("JSONEditor")
    console.log("this.schema")
    console.log(this.schema)
    console.log("this.initialValue")
    console.log(this.initialValue)
  }
};
</script>

main.js:

import Vue from 'vue';
import App from './App.vue';
import { ArrayEditor, ObjectEditor, JSONEditor } from "vue-schema-based-json-editor";

Vue.component('array-editor', ArrayEditor)
Vue.component('object-editor', ObjectEditor)
Vue.component('json-editor', JSONEditor)

new Vue( {
    render: h => h( App ),
} ).$mount( '#app' );

Expected:

The number example editor appear as in the demo

Actual:

The editor does not appear, with two possible results:

• either there is only a single html comment <!----> where the <json-editor> should appear,
• or I get a TypeError: _cache is undefined error stemming from some indexTemplateHtml JS object, stacktrace shown below.

I have not exactly figured out why I don't always get the same result.

Stacktrace:

TypeError: _cache is undefined
    indexTemplateHtml http://localhost:9080/main.da4909e4.js:27001
    _render http://localhost:9080/main.da4909e4.js:3665
    updateComponent http://localhost:9080/main.da4909e4.js:4187
    get http://localhost:9080/main.da4909e4.js:4601
    Watcher http://localhost:9080/main.da4909e4.js:4588
    mountComponent http://localhost:9080/main.da4909e4.js:4194
    $mount http://localhost:9080/main.da4909e4.js:8557
    init http://localhost:9080/main.da4909e4.js:3254
    createComponent http://localhost:9080/main.da4909e4.js:6098
    createElm http://localhost:9080/main.da4909e4.js:6046
    createChildren http://localhost:9080/main.da4909e4.js:6185
    createElm http://localhost:9080/main.da4909e4.js:6070
    patch http://localhost:9080/main.da4909e4.js:6656
    _update http://localhost:9080/main.da4909e4.js:4058
    updateComponent http://localhost:9080/main.da4909e4.js:4187
    get http://localhost:9080/main.da4909e4.js:4601
    Watcher http://localhost:9080/main.da4909e4.js:4588
    mountComponent http://localhost:9080/main.da4909e4.js:4194
    $mount http://localhost:9080/main.da4909e4.js:8557
    init http://localhost:9080/main.da4909e4.js:3254
    createComponent http://localhost:9080/main.da4909e4.js:6098
    createElm http://localhost:9080/main.da4909e4.js:6046
    patch http://localhost:9080/main.da4909e4.js:6691
    _update http://localhost:9080/main.da4909e4.js:4058
    updateComponent http://localhost:9080/main.da4909e4.js:4187
    get http://localhost:9080/main.da4909e4.js:4601
    Watcher http://localhost:9080/main.da4909e4.js:4588
    mountComponent http://localhost:9080/main.da4909e4.js:4194
    $mount http://localhost:9080/main.da4909e4.js:8557
    parcelRequire<["../src/main.js"]< http://localhost:9080/main.da4909e4.js:33344
    newRequire http://localhost:9080/main.da4909e4.js:47
    parcelRequire http://localhost:9080/main.da4909e4.js:81
    <anonymous> http://localhost:9080/main.da4909e4.js:120
main.da4909e4.js:2057:13

What's my problem? Did I miss something? is it linked to some weird ts to js transpilation issue?

[plantain-00]

vue@2 works with vue-schema-based-json-editor@7, or you will get _cache is undefined. Here is vue@2 demo link: https://github.com/plantain-00/schema-based-json-editor/blob/19affa34c3c47d26a6120e649c6f0cc05bc58e9f/packages/vue/demo/index.ts

[dddpt]

HI plantain-00,

Thanks for the quick reaction time!

I tried with version vue-schema-based-json-editor@7 and in my example I get the single html comment <!----> where the <json-editor> should appear.

I am not familiar with typescript so unable to reproduce the demo. Here is the whole folder for my example: schema-editor-minimal.zip.

If you may look into it, it'd be great!

To install dependencies and run:

npm i
yarn run dev

[plantain-00]

Your schema seems wrong, If you want object with field numberExample, it should be:

{
  "type": "object",
  "properties": {
    "numberExample": {
      "type": "number",
      "title": "A number example",
      "description": "a number description example",
      "default": 123.4,
      "minimum": 10,
      "exclusiveMinimum": true,
      "maximum": 1000,
      "exclusiveMaximum": true
    }
  }
}

If you want a number, it should be:

{
  "type": "number",
  "title": "A number example",
  "description": "a number description example",
  "default": 123.4,
  "minimum": 10,
  "exclusiveMinimum": true,
  "maximum": 1000,
  "exclusiveMaximum": true
}

[dddpt]

Great, thanks for your answer it's working now! Looking forward to playing around with it ;-)