vue2-jsoneditor's Introduction

Vue2 json editor Wrapper

Usage

Importing:

import JSONEditor from 'vue2-jsoneditor'

export default {
    name: 'app',
    data () {
        return {
            json: {
                foo: 'bar'
            }
        }
    }
    methods: {
         onChange(newJson) {
            // handle json changes
         }
    }
    components: {
        JSONEditor
    }
}

Then you can use it like this in your template: Note: onChange handler is optional

<template>
    <json-editor :onChange="onChange" :json="json" />
</template>

You can also put a ref on the editor to access the JsonEditor object directly:

<template>
    <json-editor ref="editor" />
</template>

if you need, you can access the editor instance like this:

const editor = this.$refs.editor.editor // a little redundant, but it does the trick!
editor.set(...) // At this point, you can use the methods available here: https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#methods

Build Setup

Vue.js 2 Webpack template was used to generate this project.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

vue2-jsoneditor's People

Contributors

Stargazers

Watchers

vue2-jsoneditor's Issues

Json render issue

Hi!

Thank you for this wrapper :).

I'm including it in a project but when it's rendered like this:

I've imported the editor inside a component in my component, also included in my components section and added json object to data method.

What i'm missing?

Thanks in advance :).

Tie this repo to npm

https://www.npmjs.com/package/vue2-jsoneditor

how to set options ace

Upgrade to newest version of jsoneditor?

Hi, the library is great.

Is it possible to upgrade the jsoneditor dependency to the newest version and publish it to the npm, so we can use the newest features as colorpickers, ...?

Recommend Projects