@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] (TODO)

format

Value	Description
false	default, do nothing
true	JSON.stringify(json, null, 2)
Function	custom formatter

Emits

Name	Parameters	Description
update:modelValue	json	update modelValue
change	json	value of modelValue
error	error	throw error or false when blur

Yueming Fang 2023-12-09