joaomede / vue3-json-editor

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

Here are some projects that you might want to see;

Projects

GitHub Manager Explore - ( - - - - - ) "Composition-API - TSX"
Api Doc - ( - - - - - )
Auto Docker Deploy - ( - - - - - - )
ChecklistPessoal-Quasar - ( - - - )
QuickStart Vuejs 3 TSX - ( - ) "TSX"
Docker Monitor (Azure Function) - ( - - )

Libs

vue3-xlsx - ( - - ) - Convert Fork vue 2x to 3x
vue3-Json-Editor - ( - - ) - Convert Fork vue 2x to 3x
Api Doc - JS SDK - ( - - - - - )
Resp-Express - ( - - - - Test Unit - Test Integration - ExpressJS )
Cordova-Launcher-List-App - ( - ) "Cordova Plugin - List Package Installed / Launcher"

Simple Examples

Vue CDN CRUD Example - (With Reactivity in Depth) - ( - - - CDN - DataTable - Reactivity in Depth Concept )

About ME

• 🌱 I like to study several things, like frontend technologies and new frontend / backend approaches, I like to look for new things and learn about them.
• 🏘️ https://joaomede.github.io/
• 😄 Pronouns: Eng: He - PT: Ele
• 👯 I’m looking to collaborate on unit tests, integration tests, vuejs frontend projects and API's Rest / Graph

vue3-json-editor's Issues

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)

emit('provide-editor', state.editor) never triggers

In the code there is the line
https://github.com/joaomede/vue3-json-editor/blob/master/components/vue3-json-editor.tsx#L94C7-L94C43
that should enable to us to use @provide-editor="(editor) => { //code }" but it never gets triggered

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>

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.

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.

Could not load worker TypeError: Cannot read properties of undefined (reading 'Blob')

Could not load worker TypeError: Cannot read properties of undefined (reading 'Blob')

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
)

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

我是用的是vue3和vite

Got Cannot read properties of undefined error

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

<Vue3JsonEditor
v-model="modelData"
mode="code"
@json-change="onJsonChange"
lang="zh"
:show-btns="false"
:expandedOnStart="false"
/>

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)

Missing a double quote in README.md

Missing a double quote in README.md, after :expandedOnStart="true

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

can i use it with v-for?

i use this editor with v-for, but all the editors under .jsoneditor-vue, how can i do

n.editor is null

Hi folks,
Tried using your test examples in a Vue 3 Project but cannot get it working (error: n.editor is null)

I set it in Chinese but it still seems to be in English;

<Vue3-json-editor v-model="jsonEditor.json"
class="scrollbar"
style="width: 100%;height: 100%;overflow: hidden;"
:expandedOnStart="false"
mode="form"
lang="zh"
@json-change="onJsonChange" />

can't input chinese

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

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.

Update to recent version

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

is it not possible to use it with vite?

I am unable to give height to editor

Cant not display in vue 3.3

Cant not display in vue 3.3

Error when using

TypeError: Cannot read property 'includes' of undefined

when I use vue3-json-editor I got a error TypeError: Cannot read property 'getMode' of null

Cannot read property 'getMode' of null
Please help me to deal with it .

Thank you.
joaomede

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?