editor.setValue is not a function

[tmwoods]

This isn't really an issue, I'm just a noob.

I'm trying to add in a basic json editor into my vue component but am getting 'TypeError: editor.setValue is not a function'. I'm assuming I'm missing an import or something.

Any help for a learner is appreciated :)

[marc7000]

Checkout the example below...

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>JSON-Editor</h2>
    <div id='editorHolder'></div>
    <button id='getValue'>Get value (console.log)</button>
    <button id='setValue'>Set value (console.log)</button>
  </div>
</template>

<script>
import '@json-editor/json-editor'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    const el = document.getElementById('editorHolder')
    const JSONEditor = window.JSONEditor
    const editor = new JSONEditor(el, {
      schema: {
        type: 'object',
        title: 'Car',
        properties: {
          make: {
            type: 'string',
            enum: [
              'Toyota',
              'BMW',
              'Honda',
              'Ford',
              'Chevy',
              'VW'
            ]
          },
          model: {
            type: 'string'
          },
          year: {
            type: 'integer',
            enum: [
              1995, 1996, 1997, 1998, 1999,
              2000, 2001, 2002, 2003, 2004,
              2005, 2006, 2007, 2008, 2009,
              2010, 2011, 2012, 2013, 2014
            ],
            default: 2008
          },
          safety: {
            type: 'integer',
            format: 'rating',
            maximum: '5',
            exclusiveMaximum: false,
            readonly: false
          }
        }
      }
    })

    document.getElementById('getValue').addEventListener('click', () => {
      console.log(editor.getValue())
    })

    document.getElementById('setValue').addEventListener('click', () => {
      editor.setValue({make: 'Toyota', model: 'Yaris', year: 2014, safety: 5})
      console.log(editor.getValue())
    })
  }
}
</script>

[amitlevy21]

@marc7000 I tried the example which gave me the following error:
webpack-internal:///./node_modules/vue/dist/vue.esm.js:592 [Vue warn]: Error in mounted hook: "TypeError: JSONEditor is not a constructor"
It rendered this:

The buttons do not write to console.

Can you please assist?

[marc7000]

Maybe this can help:
#127

CC: @sirockin