@axolo/json-editor-vue NPM

@axolo/json-editor-vue

A simple JSON editor of Vue based on CodeMirror Version 6.

Install

npm i @axolo/json-editor-vue

Usage

<script>
import JsonEditor from '@axolo/json-editor-vue'

export default {
  components: {
    JsonEditor
  },
  data() {
    return {
      json: {
        required: true,
        message: 'please input content'
      }
    }
  }
}
</script>

<template>
  <json-editor
    v-model="json"
    codec
    dark
    placeholder="please input json"
    @change="console.log"
    @error="console.error"
  />
</template>

Props

Name	Type	Default	Description
`modelValue`	`any`		JSON string, object, array ...
`placeholder`	`String`		placeholder
`readonly`	`Boolean`	`false`	readonly
`dark`	`Boolean`	`false`	dark theme as oneDark
`codec`	`[Boolean, Array]`	`false`	See codec
`format`	`[Boolean, Function]`	`false`	See format (TODO)
`extensions`	`Array`	`[]`	extra codemirror extensions (TODO)

codec

Value	Description
`false`	default, do nothing, `modelValue` is JSON string
`true`	`[JSON.stringify, JSON.parse]`, `modelValue` is not JSON string
`Array`	custom codec, Aarray of encode, decode