Skip to content

axolo/json-editor-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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

Releases

No releases published

Packages

No packages published