V jsoneditor

vue use jsoneditor

Version: 1.4.4 Updated: 05/19/2021

By: yansenlei License: MIT

Downloads Last 30 Days: 35.1k

Install

npm i v-jsoneditor
yarn add v-jsoneditor

Repository: https://github.com/yansenlei/VJsoneditor

CDNs

bundle.run: https://bundle.run/v-jsoneditor

jsDelivr: https://cdn.jsdelivr.net/npm/v-jsoneditor

unpkg: https://unpkg.com/v-jsoneditor

npm version Build Status license license

v-jsoneditor

Vue JSONEditor

Try the demo

https://yansenlei.github.io/VJsoneditor/

demo

Installation

npm install v-jsoneditor

Using

Import globally

import Vue from 'vue'
import VJsoneditor from 'v-jsoneditor'

Vue.use(VJsoneditor)

Import

import VJsoneditor from 'v-jsoneditor'

export default {
    name: 'app',
    components: {
        VJsoneditor
    },
    data() {
        return {
            json: {
                "hello": "vue"
            }
        }
    },
    methods: {
        onError() {
            console.log('error')
        }
    }
}

Browser

<script src='https://unpkg.com/vue@latest'></script>
<script src="./dist/v-jsoneditor.min.js"></script>

Use in template

<v-jsoneditor v-model="json" :options="options" :plus="false" height="400px" @error="onError">

Options

Name Description type default
options Jsoneditor params, You can look at the detailed configuration Object { mode: 'code' }
value(v-model) Object value Object { }
plus Whether full screen switching is added Boolean true
height Default height String -

Events

Name Description
error Error callback

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build
Categories: Vue js