@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