joaomede / vue3-json-editor Goto Github PK

View Code? Open in Web Editor NEW

40.0 2.0 27.0 2.66 MB

A jsoneditor of vue 3 (next) - (fork vue-json-editor)

License: ISC License

JavaScript 98.22% CSS 1.53% TypeScript 0.14% HTML 0.03% Vue 0.08%

vue3-json-editor's Introduction

vue3-json-editor

(fork vue-json-editor - credits original: https://github.com/dirkliu/vue-json-editor)

A json editor of vue.js

Support

Module ESM: Yes
Unpkg: Yes
CommonJS: Yes

How to run DEMO

# install
npm install

# for vue 3.x app
npm run dev

# for vite 3.x
npm run dev_vite

Component properties

v-model：bind the [json object]
:show-btns: boolean, show the save button, default: true
:expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false
:mode: string, default: tree
:lang: string, default: en
@json-change: on json changed
@json-save: on json save
@mode-change: on editor mode change, return the mode string
@has-error: on error

How to use

1. Install using npm

npm install vue3-json-editor --save

2. Use vue-json-editor in the vue component

<template>
  <div>
    <p>vue-json-editor</p>
    <Vue3JsonEditor
      v-model="json"
      :show-btns="true"
      :expandedOnStart="true"
      @json-change="onJsonChange"
      @mode-change="onModeChange"
    />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'

export default defineComponent({
  components: {
    Vue3JsonEditor
  },
  setup () {
    function onJsonChange (value) {
      console.log('value:', value)
    }

    function onModeChange (value) {
      console.log('value:', value)
    }

    const state = reactive({
      json: {}
    })

    return {
      ...toRefs(state),
      onJsonChange
    }
  }
})
</script>

3. Vue Vite Example

<template>
  <Vue3JsonEditor v-model="json" :show-btns="true" @json-change="onJsonChange" @mode-change="onModeChange" />
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Vue3JsonEditor } from '../dist/vue3-json-editor.esm'

export default defineComponent({
  name: 'App',
  components: {
    Vue3JsonEditor
  },
  setup () {
    function onJsonChange () {
      //
    }
    
    function onModeChange (value) {
      console.log('value:', value)
    }

    const state = reactive({
      json: {}
    })

    return {
      ...toRefs(state),
      onJsonChange
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vue3-json-editor's People

Stargazers

Watchers

vue3-json-editor's Issues

我在使用的时候报这样一个错误：[Vue warn]: Failed to resolve component: vue-json-editor

我是用的是vue3和vite

can't input chinese

Thanks for your job.
'm having trouble typing Chinese：

Vite + Vue 3 got warning in mode code

Here's my code that I used

<template>
  <Vue3JsonEditor v-model="state" :show-btns="true" @json-change="onJsonChange"/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'

export default defineComponent({
  name: 'App',
  components: {
    Vue3JsonEditor
  },
  setup () {
    function onJsonChange (value: any) {
      console.log(value)
    }

    const state = ref<object>({})

    return {
      state,
      onJsonChange
    }
  }
})
</script>

Update to recent version

It seems the shipped version of the editor is quite old (5.5). Is an update to 5.10 planned? 🤓

JSON validation missing in Editor

JSON validation missing in Editor - same validation present in v-jsoneditor

Recently we've upgraded our project from vue2 to vue3, in vue2 we used v-jsoneditor which has json validation(refer Img 1)
which support json validation, like "invalid syntax", "expected ;", etc.,
But in upgraded vue v-jsoneditor doesn't support and routed to vue3-json-editor as recommended for vue3.
Since then JSON validation missing (refer Img2), along with #28 console warning.

Kindly suggest any solution to fix this issue or improvement.

v-model should be two way binding

Currently using a variable in v-model="json" will correctly set the initial value of the editor, but any changes will not be updated on the jsonvariable. To correctly update this the component should emit aupdate:modelValue` event with the new value

Invalid or unexpected token

stack: Vue3 + vue3-json-editor 1.1.5

All works on local.

When deploying to production, a line of code is generated.
toString$1=functionUncurryThis(1.toString)

And 1.toString throws error: SyntaxError: Invalid or unexpected token.

Quasar Framework integration issue

First of all I didn't know where to place type of question/problem.
I tried to integrate the editor with the Quasar framework with vite and webpack.
I also tried to clone this project on local machine ... I couldn't get it to trigger the @has-errors event.

Is there any special way of having this event triggered?

Multiple json editors in same page are rendered in the same wrapper div

// add a id to identify the different components can fix this issue

const uid = getCurrentInstance().uid;

state.editor = new JsonEditor(
document.querySelector('.jsoneditor-vue-' + uid),
options,
state.json
)

Error when using

TypeError: Cannot read property 'includes' of undefined

Got Cannot read properties of undefined error

I got error as below, pls help to check, thanks.

vue3-json-editor.esm.prod.js?c45b:31 Could not load worker TypeError: Cannot read properties of undefined (reading 'Blob')
at eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at Object.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at Object.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at i (vue3-json-editor.esm.prod.js?c45b:31:1)
at new l (vue3-json-editor.esm.prod.js?c45b:31:1)
at h.createWorker (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.ace.define.$startWorker (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.ace.define.$onChangeMode (vue3-json-editor.esm.prod.js?c45b:31:1)
at u.eval (vue3-json-editor.esm.prod.js?c45b:31:1)
at l.ace.define.t.loadModule (vue3-json-editor.esm.prod.js?c45b:31:1)

is it not possible to use it with vite?

Cannot read property 'getMode' of null

vue3-json-editor.esm.js:9764 Uncaught (in promise) TypeError: Cannot read property 'getMode' of null
at expandAll (vue3-json-editor.esm.js:9764)
at _callee$ (vue3-json-editor.esm.js:9720)
at tryCatch (vue3-json-editor.esm.js:2089)
at Generator.invoke [as _invoke] (vue3-json-editor.esm.js:2306)
at Generator.next (vue3-json-editor.esm.js:2142)
at asyncGeneratorStep (vue3-json-editor.esm.js:407)
at _next (vue3-json-editor.esm.js:429)

jsoneditor-icons.svg. its always error 404

When using the component, in any usage mode, there is a problem when importing or an icon in .svg (no console). this problem (maybe) it is possible to solve it improve the rollup, however it is necessary to investigate, it occurred due to "improvement" of the component version vue2 to vue3.