testcodyhouse123
v0.3.5
Published
JSON editor & viewer for Vue 2 and 3 powered by svelte-jsoneditor & vue-json-viewer.
Downloads
14
Maintainers
Readme
English | 简体中文
json-editor-vue
JSON editor & viewer for Vue 2 and 3 powered by svelte-jsoneditor & vue-json-viewer
svelte-jsoneditor is a brand new JSON editor created by the same author of jsoneditor which 'has become hard to maintain, and the architecture needed a big overhaul'. json-editor-vue is the Vue version for svelte-jsoneditor.
Features
- JSON editing + JSON viewing
- Support both
Vue 2
&Vue 3
- Support
v-model
- Repair malformed JSON strings automatically
- element-plus & element-ui adaptable (
readonly
status goes withel-form
by default ) - Import locally or globally, config locally or globally
Installation
Vue3
npm add json-editor-vue svelte-jsoneditor
// import globally
import JsonEditorVue from 'json-editor-vue'
createApp(App)
.use(JsonEditorVue, {
// global config
})
<!-- import locally -->
<template>
<JsonEditorVue v-model="value" v-bind="{/* local config */}"/>
</template>
<script setup>
import JsonEditorVue from 'json-editor-vue'
</script>
Vue2
npm add json-editor-vue svelte-jsoneditor @vue/composition-api
// import globally
import JsonEditorVue from 'json-editor-vue'
Vue.use(JsonEditorVue, {
// global config
})
<!-- import locally -->
<template>
<JsonEditorVue :modelValue.sync="value" v-bind="{/* local config */}"/>
</template>
<script>
import JsonEditorVue from 'json-editor-vue'
export default {
components: { JsonEditorVue },
}
</script>
Props
| Name | Description | Type | Accepted Values | Default |
| --- | --- | --- | --- | --- |
| v-model / modelValue | binding value | any
| | |
| readonly | whether JsonEditorVue is readonly | boolean | | false
|
| readonlyOptions | props of vue-json-viewer | object | | |
| ... | props of svelte-jsoneditor | | | |
Config rules
- Props of two-way data binding (
v-model
/modelValue
) only support local config. - All other props support both local and global config.
Priority:
- Local config is higher than global config.
- For object type, global config will be merged into local config.