cloydlau / json-editor-vue Goto Github PK
View Code? Open in Web Editor NEWVue 2.6/2.7/3 & Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
Home Page: https://cloydlau.github.io/playground/json-editor-vue/
License: MIT License
json-editor-vue's Introduction
json-editor-vue's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
chenguzhen87 jscoolso keyzf snamper evo8fx vebin ravidashurov fossabot alvinbian xianer0405 torns study3c abbijamal jamesmikey pasoevi jcl-jcl cornorghost nurdsinc zsdycs ledunguit helwatanyjson-editor-vue's Issues
是否应该在readme中说明下对于bigint支持的不完善，避免有人踩坑
Edit Main Menu
How i can edit MainMenu ? For example : I don't want to remove table option , change color and search button . Is there any solution using props for this ?
Question: Do you have a Vue2 compiled version for CDN / <script> tag use?
Hi there
Do you please have a compiled Vue2 version that one can use via the script tag?
Thanks very much.
Modals are behind Vuetify Navigation Drawer
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
Link to minimal reproduction
Steps to reproduce
Install Vuetify & add a permanent left navigation drawer.
Add Json-Vue-Editor to the project
Click on the filter which causes a modal to open
What is expected?
The JSON Editor modal should be on top.
What is actually happening?
The JSON Editor is hidden behind the Vuetify Drawer
System Info
No response
Package Manager
None
Any additional comments?
No response
希望mainMenuBar也可以跟随明暗主题进行切换
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your proposal already exists
- Look for Q&A through appropriate channels like Stack Overflow
What problem does this feature solve?
希望mainMenuBar也可以跟随明暗主题进行切换
What does the proposed API look like?
希望可以完善
v-model绑定值类型异常
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
- Reproduce the bug in incognito/private mode to avoid interference from browser extensions
Link to minimal reproduction
https://cloydlau.github.io/demo/json-editor-vue.html
Steps to reproduce
打开默认示例，不做其他任何操作
- 直接点击“Print binding value in the Console”，输出的值是对象类型
- 切换到text模式，编辑任意内容，再点击“Print binding value in the Console”，输出的值是字符类型
- 切换到tree模式，不做任何操作，“Print binding value in the Console”，输出的值是字符类型
- 在tree模式，编辑任意内容，再点击“Print binding value in the Console”，输出的值是对象类型
绑定值需要是对象类型，输出值也应该一直是对象类型才对
What is expected?
输入输出类型应该保持一致，要么同为字符串，要么同为对象
What is actually happening?
输入输出类型不一致
System Info
浏览器名字 Chrome
浏览器版本 116.0.0.0
系统平台 Linux
原始UA信息 Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36Package Manager
npm
Any additional comments?
No response
svelte props in kebab case syntax not working
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions through appropriate channels like Stack Overflow
Link to minimal (but complete) reproduction
Steps to reproduce
Use any of the svelte-jsoneditor props in kebab vase (the vue convention) and the props will not work with this component.
What is expected?
To keep the vue convention, any svelte-jsoneditor props used in kebab format should work as expected with this component.
What is actually happening?
One has to use the camelCase prop name with this component, which causes linting issues where the kebab case is enforced.
System Info
System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Max
Memory: 14.44 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.15.1 - /usr/local/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.11.0 - /usr/local/bin/npm
pnpm: 8.15.4 - ~/Library/pnpm/pnpm
Watchman: 2024.04.01.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 123.0.6312.107
Safari: 17.4.1
npmPackages:
@babel/core: ^7.18.2 => 7.24.4
@babel/eslint-parser: ^7.18.2 => 7.24.1
@babel/plugin-proposal-class-properties: ^7.18.6 => 7.18.6
@babel/plugin-proposal-object-rest-spread: ^7.20.7 => 7.20.7
@babel/plugin-proposal-optional-chaining-assign: ^7.24.1 => 7.24.1
@babel/plugin-proposal-private-methods: ^7.18.6 => 7.18.6
@babel/plugin-proposal-private-property-in-object: ^7.21.11 => 7.21.11
@babel/plugin-transform-private-property-in-object: ^7.22.11 => 7.24.1
@babel/plugin-transform-runtime: ^7.18.2 => 7.24.3
@babel/preset-env: ^7.18.2 => 7.24.4
@inquirer/prompts: ^3.2.0 => 3.3.2
@rails/actioncable: ^6.1.4-1 => 6.1.7
@rails/actiontext: ^6.0.5 => 6.1.7
@rails/activestorage: ^7.1.1 => 7.1.3
@tabler/icons: ^1.68.0 => 1.119.0
@vue/compiler-sfc: ^3.0.5 => 3.4.21
axios: ^0.27.2 => 0.27.2
babel-loader: ^8.2.5 => 8.3.0
babel-plugin-macros: ^3.0.1 => 3.1.0
bootstrap: 5.2.1 => 5.2.1
chalk: 4.1.2 => 4.1.2
chart.js: ^3.8.0 => 3.9.1
chartjs-plugin-datalabels: ^2.0.0 => 2.2.0
clean-webpack-plugin: ^4.0.0 => 4.0.0
color-hash: ^2.0.1 => 2.0.2
compression-webpack-plugin: ^10.0.0 => 10.0.0
copy-webpack-plugin: ^11.0.0 => 11.0.0
core-js: ^3.22.7 => 3.36.1
css-loader: ^6.7.1 => 6.11.0
cssnano: ^5.1.9 => 5.1.15
dompurify: ^2.3.8 => 2.4.9
eslint: ^8.16.0 => 8.57.0
eslint-config-standard: ^17.0.0 => 17.1.0
eslint-plugin-import: ^2.26.0 => 2.29.1
eslint-plugin-n: ^15.2.0 => 15.7.0
eslint-plugin-node: ^11.1.0 => 11.1.0
eslint-plugin-promise: ^6.0.0 => 6.1.1
eslint-plugin-vue: ^9.0.1 => 9.24.0
inflected: ^2.1.0 => 2.1.0
json-editor-vue: ^0.13.0 => 0.13.0
leaflet: ^1.8.0 => 1.9.4
liquidjs: ^9.37.0 => 9.43.0
marked: ^4.0.16 => 4.3.0
mini-css-extract-plugin: ^2.6.0 => 2.8.1
number-precision: ^1.5.2 => 1.6.0
photoswipe: ^5 => 5.4.3
postcss: ^8.4.14 => 8.4.38
postcss-loader: ^7.0.0 => 7.3.4
postcss-preset-env: ^7.6.0 => 7.8.3
qs: ^6.10.3 => 6.12.0
sass: ^1.69.3 => 1.74.1
sass-loader: ^13.3.2 => 13.3.3
scroll-behavior-polyfill: ^2.0.13 => 2.0.13
stylelint: ^14.8.5 => 14.16.1
stylelint-config-sass-guidelines: ^9.0.1 => 9.0.1
stylelint-scss: ^4.2.0 => 4.7.0
trix: ^1.3.1 => 1.3.1
ts-loader: ^9.3.0 => 9.5.1
typescript: ^4.7.2 => 4.9.5
view3: https://github.com/omohokcoj/view3#motor-admin => 1.0.0
vue: ^3.2.0 => 3.4.21
vue-draggable-next: ^2.1.1 => 2.2.1
vue-loader: ^17.0.0 => 17.4.2
vue-router: ^4.0.15 => 4.3.0
vue3-ace-editor: 2.2.2 => 2.2.2
webpack: ^5.72.1 => 5.91.0
webpack-assets-manifest: ^5.1.0 => 5.2.1
webpack-bundle-analyzer: ^4.5.0 => 4.10.1
webpack-cli: ^4.9.2 => 4.10.0
webpack-dev-server: ^4.9.0 => 4.15.2Package Manager
None
Any additional comments?
No response
Incompatible with the latest vue 3.x+
It appears to be incompatible with the latest [email protected]
❯ npm i json-editor-vue
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@"3.2.31" from @vue/[email protected]
npm ERR! node_modules/@vue/server-renderer
npm ERR! @vue/server-renderer@"3.2.31" from [email protected]
npm ERR! peer vue@">=3.0.0" from [email protected]
npm ERR! node_modules/vue-json-pretty
npm ERR! vue-json-pretty@"^2.0.6" from the root project
npm ERR! 1 more (vue3-json-viewer)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! json-editor-vue@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR! peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR! node_modules/@vue/composition-api
npm ERR! peerOptional @vue/composition-api@">=1" from [email protected]
npm ERR! node_modules/json-editor-vue
npm ERR! json-editor-vue@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
初始expand的深度
请问有没有办法可以指定编辑器在 readonly 模式下的初始化展示 JSON 的 深度？
Not working with Vue2
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
- Reproduce the bug in incognito/private mode to avoid interference from browser extensions
Link to minimal reproduction
Steps to reproduce
Install like in readme
What is expected?
to work
What is actually happening?
not working
System Info
System:
OS: Linux 6.2 Arch Linux
CPU: (16) x64 AMD Ryzen 7 2700 Eight-Core Processor
Memory: 43.51 GB / 62.75 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 16.20.0 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.19.2 - /usr/bin/npm
Browsers:
Brave Browser: 111.1.49.132
Chromium: 111.0.5563.146
Firefox: 111.0.1
npmPackages:
@google/model-viewer: ^3.0.0 => 3.0.0
@mdi/font: ^7.1.96 => 7.1.96
@types/file-saver: ^2.0.5 => 2.0.5
@types/lodash: ^4.14.175 => 4.14.175
@types/marked: ^4.0.7 => 4.0.7
@types/semver: ^7.3.9 => 7.3.9
@types/semver-stable: ^3.0.0 => 3.0.0
@types/timeago: ^1.6.0 => 1.6.0
@types/uuid: ^9.0.0 => 9.0.0
@typescript-eslint/eslint-plugin: ^5.51.0 => 5.51.0
@typescript-eslint/parser: ^5.51.0 => 5.51.0
@vue/cli-plugin-babel: 5.0.8 => 5.0.8
@vue/cli-plugin-eslint: ~5.0.8 => 5.0.8
@vue/cli-plugin-pwa: ~5.0.8 => 5.0.8
@vue/cli-plugin-router: ~5.0.8 => 5.0.8
@vue/cli-plugin-typescript: ~5.0.8 => 5.0.8
@vue/cli-plugin-vuex: ~5.0.8 => 5.0.8
@vue/cli-service: ^5.0.8 => 5.0.8
@vue/eslint-config-airbnb: ^7.0.0 => 7.0.0
@vue/eslint-config-typescript: ^11.0.2 => 11.0.2
ansi_up: ^5.2.1 => 5.2.1
apexcharts: ^3.36.3 => 3.36.3
axios: ^0.21.1 => 0.21.1
babel-loader: ^8.2.5 => 8.2.5
core-js: ^3.25.5 => 3.25.5
date-fns: ^2.23.0 => 2.23.0
eslint: ^8.33.0 => 8.33.0
eslint-import-resolver-typescript: ^3.5.3 => 3.5.3
eslint-plugin-html: ^7.1.0 => 7.1.0
eslint-plugin-import: ^2.27.5 => 2.27.5
eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0
eslint-plugin-vue: ^9.9.0 => 9.9.0
file-saver: ^2.0.5 => 2.0.5
fuse.js: ^6.6.2 => 6.6.2
javascript-time-ago: ^2.3.11 => 2.3.11
json-editor-vue: ^0.10.5 => 0.10.5
lodash: ^4.17.21 => 4.17.21
marked: ^4.1.1 => 4.1.1
register-service-worker: ^1.7.1 => 1.7.2
roboto-fontface: * => 0.10.0
sass: ~1.32.0 => 1.32.13
sass-loader: ^10.0.0 => 10.2.0
semver: ^7.3.8 => 7.3.8
semver-stable: ^3.0.0 => 3.0.0
simple-icons: ^6.8.0 => 6.9.0
typescript: ~4.9.5 => 4.9.5
util: ^0.12.5 => 0.12.5
uuid: ^9.0.0 => 9.0.0
vanilla-jsoneditor: ^0.16.1 => 0.16.1
vue: ^2.6.11 => 2.6.14
vue-apexcharts: ^1.6.2 => 1.6.2
vue-cli-plugin-vuetify: ~2.4.1 => 2.4.1
vue-json-viewer: 2 => 2.2.22
vue-router: ^3.2.0 => 3.5.1
vue-template-babel-compiler: ^2.0.0 => 2.0.0
vue-template-compiler: ^2.6.11 => 2.6.14
vue-tooltip-directive: ^1.0.2 => 1.0.2
vue-tour: ^2.0.0 => 2.0.0
vuetify: ^2.4.0 => 2.5.4
vuetify-loader: ^1.7.0 => 1.7.2
vuex: ^3.4.0 => 3.6.2
vuex-module-decorators: ^1.0.1 => 1.0.1
webpack: ^5.74.0 => 5.74.0
wifi-qr-code-generator: ^1.1.1 => 1.1.1Package Manager
yarn
Any additional comments?
ERROR Failed to compile with 9 errors 7:41:26 AM
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'defineComponent' (imported as 'un') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'getCurrentInstance' (imported as 'fn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'ref' (imported as 'yt') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'watch' (imported as 'Y') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'onUnmounted' (imported as 'sn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'onMounted' (imported as 'ln') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'unref' (imported as 'pn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
export 'h' (imported as 'vn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
error in ./node_modules/vue-demi/lib/index.mjs
Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.mjs' in '/home/patrick/git/blue/companion-docker/core/frontend/node_modules/vue-demi/lib'
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1378:8-10
export 'defineComponent' (imported as 'un') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1400:19-21
export 'getCurrentInstance' (imported as 'fn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1400:57-59
export 'ref' (imported as 'yt') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1400:67-69
export 'ref' (imported as 'yt') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1400:79-81
export 'ref' (imported as 'yt') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1426:11-12
export 'watch' (imported as 'Y') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1435:8-9
export 'watch' (imported as 'Y') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1439:8-9
export 'watch' (imported as 'Y') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1441:8-9
export 'watch' (imported as 'Y') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1449:43-45
export 'onUnmounted' (imported as 'sn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1451:8-10
export 'onMounted' (imported as 'ln') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1457:17-19
export 'unref' (imported as 'pn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1459:14-16
export 'h' (imported as 'vn') was not found in 'vue-demi' (possible exports: Vue, Vue2, install, isVue2, isVue3, version)
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
ERROR in ./node_modules/vue-demi/lib/index.mjs 2:0-81
Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.mjs' in '/home/patrick/git/blue/companion-docker/core/frontend/node_modules/vue-demi/lib'
@ ./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1:0-170 12:6-8 1370:33-35 1370:67-69 1378:8-10 1400:19-21 1400:57-59 1400:67-69 1400:79-81 1426:11-12 1435:8-9 1439:8-9 1441:8-9 1449:43-45 1451:8-10 1457:17-19 1459:14-16
@ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-44 6:4-17
@ ./src/views/BagEditorView.vue?vue&type=script&lang=ts& 1:0-245 1:261-264 1:266-508 1:266-508
@ ./src/views/BagEditorView.vue 2:0-65 3:0-60 3:0-60 9:2-8
@ ./src/router/index.ts 5:0-55 92:13-26
@ ./src/main.ts 10:0-30 27:2-8
webpack compiled with 14 errors
(node:235648) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [Server]. Use emitter.setMaxListeners() to increase limit
No issues found.时间类型添加秒级时间戳的识别
"Edit the Selected Path" breaks with Error : (Uncaught (in promise) TypeError: c6.stringify is not a function)
$ npm list
├── @ts-pro/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── @vitejs/[email protected]
├── @vue/[email protected]
├── @vue/[email protected]
├── @vueform/[email protected]
├── @vueuse/[email protected]
...
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
...
Click on "Edit the selected Path" to reproduce the error - which occurs in the file:
/node_modules/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte
(Uncaught (in promise) TypeError: c6.stringify is not a function)
v-if condition ruins the json editor visualization
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions through appropriate channels like Stack Overflow
Link to minimal (but complete) reproduction
https://github.com/giuliohome-org/repro-jsoneditor-issue/blob/main/src/components/HelloWorld.vue
Steps to reproduce
Main code
<div v-if="switchMe" > read only</div>
<JsonEditorVue v-else v-model="myJSON" /> npm i
npm run devYou see
If you click switchCondition
and then back to the previous json editor if you click again.
But now, if you edit a value
for example "a": 2
and you click 2 times again
the content visualization is ruined (and formatting does not work either)
What is expected?
Setting the v-if condition to false and back to true should not change the editor content visualization
What is actually happening?
A wrongly formatted text is displayed instead
System Info
Latest Vue 3 and latest json-editor-vue on any Linux (e.g. Ubuntu) OS.Package Manager
npm
Any additional comments?
No response
Documentation
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
What problem does this feature solve?
I can't figure out how to use this component to its fullest extent. The documentation (as far as I'm understanding) doesn't show how to change the mode, theme, show/hide the menu bar, etc.
Really I just need to see the code for this demo:
https://cloydlau.github.io/demo/json-editor-vue.html
Is the code for that demo in the repo? Maybe its there but I'm struggling to find it.
Thanks.
What does the proposed API look like?
Just a little more informative documentation.
v-model default value will be lowerCase auto
when set v-model defalut value like this "{ Abcd: '123'}", it will be change to "{ abcd: '123'}";
vue2.6 node8.15.0 get wrong when build
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Make reasonable efforts to troubleshoot and rule out issues with your own code or any 3rd party library
- Look for / ask questions through appropriate channels like Stack Overflow
Link to minimal (but complete) reproduction
None
Steps to reproduce
node 8.15.0
npm run build
What is expected?
build success
What is actually happening?
System Info
node 8.15.0
"dependencies": {
"@v-charts2/histogram": "^1.0.1",
"@v-charts2/line": "^1.0.1",
"@vue/composition-api": "^1.7.2",
"axios": "0.17.1",
"core-js": "^3.6.5",
"dayjs": "1.8.17",
"element-ui": "git+ssh://[email protected]:frontend/element-ui.git#v2.15.4-1.4.30",
"js-cookie": "2.2.0",
"json-editor-vue": "^0.12.0",
"lodash": "^4.17.15",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"qs": "6.9.0",
"v-code-diff": "^0.3.12",
"vue": "^2.6.11",
"vue-i18n": "^8.26.8",
"vue-json-editor": "^1.4.3",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
}Package Manager
npm
Any additional comments?
No response
It is recommended to write configurable properties and events in the document
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
What problem does this feature solve?
比如：如何配置才能默认展开全部、模式应该如何配置才能只出现一个，而不是三个都需要，保留其一即可
What does the proposed API look like?
Problem with mode
Hi,
I am using this beautiful editor but having a problem with mode. I have Vue 2.6.14.
Here is my usage:
<json-editor-vue
v-model="json"
:readOnly="true"
:navigationBar="false"
:mainMenuBar="false"
:mode.sync="data.mode"
></json-editor-vue>
In data I also have: mode: 'text',
I also tried :mode.sync="mode"
But editor is not showing up in text mode.
Thanks
Cannot read properties of null (reading 'getBoundingClientRect')
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
Link to minimal reproduction
0
Steps to reproduce
求帮助解决
1、开发环境：vue 2.7 、npm 14.16.1
2、插件版本："json-editor-vue": "0.10.19"、"vanilla-jsoneditor": "^0.18.12",
3、问题描述：在编辑器内随便点击几下鼠标，关闭编辑器所在页面。到其他页面后，在任意位置每次点击鼠标，控制台都会持续报错 “content.js:859 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')”。
<JsonEditorVue
v-if="dataForm.rulesFileContent!=null"
v-model="dataForm.rulesFileContent"
:selection="selectionData"
:mode="'text'"
:mainMenuBar="false" />
<script>
import JsonEditorVue from 'json-editor-vue'
data() {
return {
selectionData: null,
dataForm: {
rulesFileContent: {},
},
}
},
components: {
JsonEditorVue
}
</script>
点击进入报错文件内部：
What is expected?
不希望控制台持续报错
What is actually happening?
每次操作编辑器后，鼠标点击别的页面任意位置，控制台都持续不断出现报错
System Info
No response
Package Manager
npm
Any additional comments?
No response
Support for Nuxt 3 Auto Import
Using with Nuxt3
I am trying to test this with Nuxt 3 and I am getting document is not defined when the page loads.
I have tried using the transpile settings in the nuxt config and wrapped around the plugin but no luck.
Any ides how I could get this working?
Can't install / update
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
- Reproduce the bug in incognito/private mode to avoid interference from browser extensions
Link to minimal reproduction
Environment specific error
Steps to reproduce
-
Linux: npm install json-editor-vue or npm update
-
MacOS: npm update
What is expected?
Successfully update/install.
What is actually happening?
On linux;
npm ERR! code 127
npm ERR! path /home/.../workspace/test/node_modules/json-editor-vue
npm ERR! command failed
npm ERR! command sh -c simple-git-hooks
npm ERR! sh: line 1: simple-git-hooks: command not foundOn MacOS;
I can't get the error message for now but the error was something like lstat couldn't be located.
System Info
System:
OS: Linux 6.4 Arch Linux
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
Memory: 12.55 GB / 15.31 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.5.1 - /usr/bin/node
npm: 9.8.1 - /usr/bin/npmPackage Manager
npm
Any additional comments?
The problem occured on 10.0.7, 10.0.6 was working.
No response
关于配置v-model:mode为text问题
我这边是vue3使用环境
数据格式为{ "bigint": 124124124124124124124, "boolean": true, "string": "Hello World", "number": 123.456, "color": "#b0a4e3", "null": null, }
这样配置后 一直出现如下错误 如果不是配mode为text 那么就是正常的 我想默认为text模式 需要怎么修改呢
schema validate
I would like to use with a schema. Can you tell me if this is possible, and if so, how?
Text mode cursor and selection are not showing
Editor works in table mode. But in text mode you can edit the text but the cursor is not visible (no blinking cursor).
Also you can highlight and then remove but you do not see you highlighted text:
<JsonEditorVue
v-model="sip_schema"
mode="table"
:readOnly="false"
/>
in package.json:
"json-editor-vue": "^0.10.5",
"vanilla-jsoneditor": "^0.15.1",
Using "vue": "^3.2.41",
and vite for minify (but issue is present both in development npm run dev and in production mode).
When on a line you do see it highlighted but you can't select part or multiple lines and see the dark selected text like you can on https://jsoneditoronline.org/
hwo to use methods like get()
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
What problem does this feature solve?
svelte-jsoneditor has get() method.
how to use it in json-editor-vue
What does the proposed API look like?
const jsonEditor = ref(null);
jsonEditor.value.get();
nuxt如何配置lang和mode
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your proposal already exists
- Look for Q&A through appropriate channels like Stack Overflow
What problem does this feature solve?
nuxt3 + vu3 如何配置 mode 为 text，保留两个格式化按钮，语言配置为中文。另外，是否可以加自定义按钮，实现点击全屏的功能。
`
<script setup> const value = ref() const options = { props: { mode: 'text', lang: 'zh', }, } </script> `
What does the proposed API look like?
在chrome浏览器下，http时复制会报TypeError: Cannot read properties of undefined (reading 'writeText')
经查询是chrome在http时navigator.clipboard会undefined，希望可以添加兼容的写法
Usage on Vue 2.6
ReferenceError: require is not defined
原来遇到了一个编译失败问题，通过以下方法解决了：
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
// babel.config.js
module.exports = {
plugins: [
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
],
}
// vue.config.js
module.exports = {
transpileDependencies: ['json-editor-vue'],
chainWebpack(config) {
// Getting webpack to recognize the .mjs file
config.module
.rule('mjs')
.include.add(/node_modules/)
.type('javascript/auto')
.end()
},
}
然后，页面抛了一个异常：
ReferenceError: require is not defined
at ./node_modules/json-editor-vue/dist/json-editor-vue.mjs(jso-editor-vue.mjs:3:1)
...
版本信息如下：
vue：2.6.10
node：8.9.0
请教大佬这个异常需要怎么解决呢？谢谢！
How to read a raw string from Content?
Hey there,
thank you very much for the effort. I want to use your component by passing in the current content as a prop and emit the modified string back to its parent.
<script setup lang="ts">
import JsonEditorVue, { Mode } from "json-editor-vue";
import type { Content, ContentErrors, JSONPatchResult } from "vanilla-jsoneditor";
import { type Ref, ref } from "vue";
defineProps<{ content: string; }>();
const emit = defineEmits<{ (e: "update:content", content: string): void; }>();
function onChange(content: Content, previousContent: Content, changeStatus: { contentErrors: ContentErrors; patchResult: JSONPatchResult | null; }): void {
// get a raw string from content
const newContent: string = "raw content string";
emit("update:content", newContent);
}
</script>
<template>
<json-editor-vue :value="content" @change="onChange" />
</template>How can I read a raw string from the content variable? Is it possible to get it without any escape characters?
I want to validate and parse the raw string later on :)
Typescript compatibility error
Hello,
I want use the version Vue 2.6 or Earlier so I execute the following command:
npm add json-editor-vue vanilla-jsoneditor @vue/composition-api
When I use the next line:
import VueJsonEditor from 'vue-json-editor'
It produces the next error:
./node_modules/json-editor-vue/dist/json-editor-vue.mjs 1377:8-10
Can't import the named export 'defineComponent' from non EcmaScript module (only default export is available)
So my question is If the plugin is compatible with Typescript.
Note: I tried to use the import from:
vue-json-editor/dist
but It didn't works for me.
Tahnks.
js文件报文件不支持？
是我的svelte环境有问题么，通过import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'加载js文件时总报类型不支持
Failed to compile.
./node_modules/svelte-jsoneditor/dist/jsoneditor.js
Module parse failed: Unexpected token (5:23414)
You may need an appropriate loader to handle this file type.
| * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
| * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
| */var Pe={prefix:"fas",iconName:"angle-down",icon:[320,512,[],"f107","M143 352.3L7 216.3c-9.4-
Could not read source map: vue-global-config.mjs.map
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for Q&A through appropriate channels like Stack Overflow
Link to minimal reproduction
Validation
- ⚠ I understand that invalid, incomplete or superfluous reproduction can lead to this issue being closed
Describe the bug and steps to reproduce
Could not read source map for file:///home/anastold/git-projects/admin-dashboard-ng2/node_modules/.pnpm/json-editor-vue%400.15.1_%40lezer%2Bcommon%401.2.1_vue%403.4.27_typescript%405.4.5_/node_modules/json-editor-vue/node_modules/.pnpm/vue-global-config%400.6.1_%40vue%2Bcomposition-api%401.7.2_vue%403.4.26_typescript%405.4.5___vue%403.4.26_typescript%405.4.5_/node_modules/vue-global-config/dist/vue-global-config.mjs: ENOENT: no such file or directory, open '/home/anastold/git-projects/admin-dashboard-ng2/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_/node_modules/json-editor-vue/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_/node_modules/vue-global-config/dist/vue-global-config.mjs.map'
The missing file should be in the "node_modules" directory of the json-editor-vue dependency - in my case there is only a ".bin" directory. PNPM and NPM don't install the necessary sub-packages:
System Info
System:
OS: Linux 4.18 Red Hat Enterprise Linux 8.4 (Ootpa)
CPU: (4) x64 Intel(R) Xeon(R) Gold 6240 CPU @ 2.60GHz
Memory: 7.10 GB / 15.65 GB
Container: Yes
Shell: 5.5.1 - /usr/bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 9.0.6 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
npmPackages:
@popperjs/core: ^2.11.8 => 2.11.8
@tinymce/tinymce-vue: ^5.1.1 => 5.1.1
@tsconfig/node20: ^20.1.4 => 20.1.4
@types/bootstrap: ^5.2.10 => 5.2.10
@types/humanize-duration: ^3.27.4 => 3.27.4
@types/jquery: ^3.5.29 => 3.5.30
@types/node: ^20.12.8 => 20.12.11
@types/uuid: ^9.0.8 => 9.0.8
@vite-pwa/assets-generator: ^0.2.4 => 0.2.4
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
@vue/eslint-config-prettier: ^9.0.0 => 9.0.0
@vue/eslint-config-typescript: ^13.0.0 => 13.0.0
@vue/tsconfig: ^0.5.1 => 0.5.1
archiver: ^7.0.1 => 7.0.1
autoprefixer: ^10.4.19 => 10.4.19
axios: ^1.6.8 => 1.6.8
bootstrap: 5.3.3 => 5.3.3
bootstrap-icons: ^1.11.3 => 1.11.3
chalk: ^5.3.0 => 5.3.0
chart.js: ^4.4.2 => 4.4.2
corejs-typeahead: ^1.3.4 => 1.3.4
datatables.net: ^2.0.5 => 2.0.7
datatables.net-bs5: ^2.0.5 => 2.0.7
datatables.net-buttons: ^3.0.2 => 3.0.2
datatables.net-buttons-bs5: ^3.0.2 => 3.0.2
datatables.net-fixedcolumns-bs5: ^5.0.0 => 5.0.0
datatables.net-plugins: ^2.0.5 => 2.0.7
datatables.net-responsive-bs5: ^3.0.2 => 3.0.2
datatables.net-scroller-bs5: ^2.4.1 => 2.4.2
datatables.net-vue3: ^3.0.1 => 3.0.1
dayjs: ^1.11.11 => 1.11.11
eslint: ^8.56.0 => 8.57.0
eslint-plugin-vue: ^9.25.0 => 9.25.0
flag-icons: ^7.2.1 => 7.2.1
https-proxy-agent: ^7.0.4 => 7.0.4
humanize-duration: ^3.32.0 => 3.32.0
i18next: 23.11.3 => 23.11.3
i18next-vue: ^4.0.0 => 4.0.0
inquirer: ^9.2.20 => 9.2.20
jquery: ^3.7.1 => 3.7.1
js-file-download: ^0.4.12 => 0.4.12
json-editor-vue: ^0.15.1 => 0.15.1
knip: ^5.11.0 => 5.13.0
machina: ^4.0.2 => 4.0.2
node-fetch: ^3.3.2 => 3.3.2
npm-check-updates: ^16.14.20 => 16.14.20
npm-run-all: ^4.1.5 => 4.1.5
pinia: ^2.1.7 => 2.1.7
prettier: ^3.2.5 => 3.2.5
rollup-plugin-license: ^3.3.1 => 3.3.1
rollup-plugin-visualizer: ^5.12.0 => 5.12.0
sass: ~1.76.0 => 1.76.0
sharp: ^0.33.3 => 0.33.3
stylelint: ^16.5.0 => 16.5.0
stylelint-config-standard-scss: ^13.1.0 => 13.1.0
stylelint-config-standard-vue: ^1.0.0 => 1.0.0
svgo: ^3.2.0 => 3.3.0
throttle-debounce: ^5.0.0 => 5.0.0
tinymce: ^7.0.1 => 7.1.0
typescript: ~5.4.5 => 5.4.5
unplugin-auto-import: ^0.17.5 => 0.17.5
uuid: ^9.0.1 => 9.0.1
vite: ^5.2.11 => 5.2.11
vite-plugin-image-optimizer: ^1.1.7 => 1.1.7
vite-plugin-pwa: ^0.20.0 => 0.20.0
vite-plugin-vue-devtools: ^7.1.3 => 7.1.3
vue: ^3.4.26 => 3.4.27
vue-chartjs: ^5.3.1 => 5.3.1
vue-datepicker-next: ^1.0.3 => 1.0.3
vue-router: ^4.3.2 => 4.3.2
vue-scrolling-table: ^2.0.0 => 2.0.0
vue-tsc: ^2.0.16 => 2.0.16
vue3-toastify: ^0.2.1 => 0.2.1
vuedraggable: 4.1.0 => 4.1.0
workbox-window: ^7.1.0 => 7.1.0Package Manager
pnpm
Content does not update automatically when prop changes
I'm using the component inside a Subcomponent and expect the model value as a prop. The problem is that when I change the value of the prop, the content inside the editor does not change, please have a look at the small reproduction sample
https://stackblitz.com/edit/vitejs-vite-9dxsxy?file=src%2FJsonEditor.vue
So I think I must use the current editor instance and call .update("newContent") ? https://github.com/cloydlau/json-editor-vue#expose
If you have a look at JsonEditor.vue you will see that I'm trying to access the editor instance but it seems that's the wrong way...
TypeError: jsonEditorComponent.value.update is not a function
Missing vue-global-config/dist/vue-global-config.mjs.map
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for Q&A through appropriate channels like Stack Overflow
Link to minimal reproduction
Validation
- I understand that invalid, incomplete or superfluous reproduction can be rejected
Describe the bug and steps to reproduce
Missing node_modules/json-editor-vue/node_modules/.pnpm/vue-global-config@0.6.0_@vue[email protected][email protected][email protected][email protected][email protected]_/node_modules/vue-global-config/dist/vue-global-config.mjs.map.
ENOENT: no such file or directory
System Info
xxPackage Manager
yarn
Usage on Vue 3, Vite 4, Typescript 4.9
Hello,
my project use Vue 3.2, Vite 4.0.4, Typescript 4.9.
Packages.json contain:
"json-editor-vue": "^0.10.5",
...
"peerDependencies": {
"vanilla-jsoneditor": "^0.14.5"
}
This is a simplified version of my component "my-json-editor" :
<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue'
interface Props { source: any }
const props = defineProps<Props>()
</script>
<template>
<div class="ml-5 w-100% h-98%">
<json-editor-vue v-model="props.source" :readOnly="true" />
</div>
</template>
When I run vite on development mode it working fine.
When I run vite build command I have this blocking error on startup application:
to <a href="https://jmespath.org/tutorial.html" target="_blank" rel="noopener noreferrer">the interactive tutorial</a>.\n</p>\n',createQuery:function(e,t){var n=t.sort,r=t.filter,o=t.projection,i="";if(r&&r.path&&r.relation&&r.value){var a=["0"].concat(r.path),s=qs(e,a),c=GC(r.value),u="string"==typeof s&&null!=c?'"'.concat(r.value,'"'):c;i+="[? "+M8(r.path)+" "+r.relation+" `"+u+"`]"}else i+=Array.isArray(e)?"[*]":"@";n&&n.path&&n.direction&&("desc"===n.direction?i+=" | reverse(sort_by(@, &"+M8(n.path)+"))":i+=" | sort_by(@, &"+M8(n.path)+")");if(o&&o.paths)if("]"!==i[i.length-1]&&(i+=" | [*]"),1===o.paths.length){var l=o.paths[0];i+=0===l.length?"":"."+M8(l)}else o.paths.length>1&&(i+=".{"+o.paths.map((function(e){return E8(e[e.length-1])+": "+M8(e)})).join(", ")+"}");return i},executeQuery:function(e,t){return _8.search(e,t)}};function M8(e){if(0===e.length)return"@";var t=e.map((function(e){return"number"==typeof e?"["+e+"]":"."+E8(String(e))})).join("");return"."===t[0]?t.slice(1):t}function E8(e){return e.match(/^[A-Za-z\d_$]+$/)?e:JSON.stringify(e)}
^
20: /*!
21: * vanilla-picker v2.12.1
error during build:
RollupError: Identifier 'NH' has already been declared
at error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:2094:30)
at Module.error (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:13136:16)
at Module.tryParse (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:13810:25)
at Module.setSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:13420:39)
at ModuleLoader.addModuleSource (file:///D:/_PROJECTS/POMINI/pomini-src/frontend/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:23237:20)
ELIFECYCLE Command failed with exit code 1.
When I use rollupOptions on vite.config.ts
build: {
...
rollupOptions: {
external: ['vanilla-jsoneditor'],
},
},
the build pass, but I have this other error:
Uncaught TypeError: Failed to resolve module specifier "vanilla-jsoneditor". Relative references must start with either "/", "./", or "../".
I'm on loop, any help please ? Thank's
Could not read source map: vue-global-config.mjs.map
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for Q&A through appropriate channels like Stack Overflow
Link to minimal reproduction
https://github.com/AlexNastold/json-editor-vue-bug
Validation
- ⚠ I understand that invalid, incomplete or superfluous reproduction can lead to this issue being closed
Describe the bug and steps to reproduce
Could not read source map for file:///home/anastold/git-projects/admin-dashboard-ng2/node_modules/.pnpm/json-editor-vue%400.15.1_%40lezer%2Bcommon%401.2.1_vue%403.4.27_typescript%405.4.5_/node_modules/json-editor-vue/node_modules/.pnpm/vue-global-config%400.6.1_%40vue%2Bcomposition-api%401.7.2_vue%403.4.26_typescript%405.4.5___vue%403.4.26_typescript%405.4.5_/node_modules/vue-global-config/dist/vue-global-config.mjs: ENOENT: no such file or directory, open '/home/anastold/git-projects/admin-dashboard-ng2/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]_/node_modules/json-editor-vue/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]_/node_modules/vue-global-config/dist/vue-global-config.mjs.map'
- Clone repository
- Install dependencies
- Run "pnpm dev"
- Start chrome or edge with vscode "run and debug"
- Look at vscodes "DEBUG CONSOLE"
System Info
System:
OS: Linux 4.18 Red Hat Enterprise Linux 8.4 (Ootpa)
CPU: (4) x64 Intel(R) Xeon(R) Gold 6240 CPU @ 2.60GHz
Memory: 7.10 GB / 15.65 GB
Container: Yes
Shell: 5.5.1 - /usr/bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 9.0.6 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
npmPackages:
@popperjs/core: ^2.11.8 => 2.11.8
@tinymce/tinymce-vue: ^5.1.1 => 5.1.1
@tsconfig/node20: ^20.1.4 => 20.1.4
@types/bootstrap: ^5.2.10 => 5.2.10
@types/humanize-duration: ^3.27.4 => 3.27.4
@types/jquery: ^3.5.29 => 3.5.30
@types/node: ^20.12.8 => 20.12.11
@types/uuid: ^9.0.8 => 9.0.8
@vite-pwa/assets-generator: ^0.2.4 => 0.2.4
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
@vue/eslint-config-prettier: ^9.0.0 => 9.0.0
@vue/eslint-config-typescript: ^13.0.0 => 13.0.0
@vue/tsconfig: ^0.5.1 => 0.5.1
archiver: ^7.0.1 => 7.0.1
autoprefixer: ^10.4.19 => 10.4.19
axios: ^1.6.8 => 1.6.8
bootstrap: 5.3.3 => 5.3.3
bootstrap-icons: ^1.11.3 => 1.11.3
chalk: ^5.3.0 => 5.3.0
chart.js: ^4.4.2 => 4.4.2
corejs-typeahead: ^1.3.4 => 1.3.4
datatables.net: ^2.0.5 => 2.0.7
datatables.net-bs5: ^2.0.5 => 2.0.7
datatables.net-buttons: ^3.0.2 => 3.0.2
datatables.net-buttons-bs5: ^3.0.2 => 3.0.2
datatables.net-fixedcolumns-bs5: ^5.0.0 => 5.0.0
datatables.net-plugins: ^2.0.5 => 2.0.7
datatables.net-responsive-bs5: ^3.0.2 => 3.0.2
datatables.net-scroller-bs5: ^2.4.1 => 2.4.2
datatables.net-vue3: ^3.0.1 => 3.0.1
dayjs: ^1.11.11 => 1.11.11
eslint: ^8.56.0 => 8.57.0
eslint-plugin-vue: ^9.25.0 => 9.25.0
flag-icons: ^7.2.1 => 7.2.1
https-proxy-agent: ^7.0.4 => 7.0.4
humanize-duration: ^3.32.0 => 3.32.0
i18next: 23.11.3 => 23.11.3
i18next-vue: ^4.0.0 => 4.0.0
inquirer: ^9.2.20 => 9.2.20
jquery: ^3.7.1 => 3.7.1
js-file-download: ^0.4.12 => 0.4.12
json-editor-vue: ^0.15.1 => 0.15.1
knip: ^5.11.0 => 5.13.0
machina: ^4.0.2 => 4.0.2
node-fetch: ^3.3.2 => 3.3.2
npm-check-updates: ^16.14.20 => 16.14.20
npm-run-all: ^4.1.5 => 4.1.5
pinia: ^2.1.7 => 2.1.7
prettier: ^3.2.5 => 3.2.5
rollup-plugin-license: ^3.3.1 => 3.3.1
rollup-plugin-visualizer: ^5.12.0 => 5.12.0
sass: ~1.76.0 => 1.76.0
sharp: ^0.33.3 => 0.33.3
stylelint: ^16.5.0 => 16.5.0
stylelint-config-standard-scss: ^13.1.0 => 13.1.0
stylelint-config-standard-vue: ^1.0.0 => 1.0.0
svgo: ^3.2.0 => 3.3.0
throttle-debounce: ^5.0.0 => 5.0.0
tinymce: ^7.0.1 => 7.1.0
typescript: ~5.4.5 => 5.4.5
unplugin-auto-import: ^0.17.5 => 0.17.5
uuid: ^9.0.1 => 9.0.1
vite: ^5.2.11 => 5.2.11
vite-plugin-image-optimizer: ^1.1.7 => 1.1.7
vite-plugin-pwa: ^0.20.0 => 0.20.0
vite-plugin-vue-devtools: ^7.1.3 => 7.1.3
vue: ^3.4.26 => 3.4.27
vue-chartjs: ^5.3.1 => 5.3.1
vue-datepicker-next: ^1.0.3 => 1.0.3
vue-router: ^4.3.2 => 4.3.2
vue-scrolling-table: ^2.0.0 => 2.0.0
vue-tsc: ^2.0.16 => 2.0.16
vue3-toastify: ^0.2.1 => 0.2.1
vuedraggable: 4.1.0 => 4.1.0
workbox-window: ^7.1.0 => 7.1.0Package Manager
pnpm
Can't load the plugin
Hey, I have an older vue-cli project, however with vue 2.7
After installation and trying to globally register the plugin I am getting following errors
error in ./node_modules/json-editor-vue/dist/json-editor-vue.mjs
Module parse failed: Unexpected token (205:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| function Ft(t, r) {
| var n = typeof t;
> return r = r ?? se, !!r && (n == "number" || n != "symbol" && le.test(t)) && t > -1 && t % 1 == 0 && t < r;
| }
| function lt(t, r, n) {
@ ./src/main.ts 26:0-44 27:8-21I tried to add a rule for mjs files to my vue.config.js
chainWebpack: config => {
config.module
.rule('mjs$')
.test(/\.mjs$/)
.include
.add(/node_modules/)
.end()
.type('javascript/auto')
},but this also do not work.
Not working with Vue 3 & TypeScript
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
- Reproduce the bug in incognito/private mode to avoid interference from browser extensions
Link to minimal reproduction
None
Steps to reproduce
- Install JSON Editor Vue in a Vue 3 & TypeScript app:
npm i json-editor-vue vanilla-jsoneditor - Try importing it as so:
<script setup lang="ts"> import JsonEditorVue from 'json-editor-vue'; </script>
What is expected?
I expected this to work:
<template>
<JsonEditorVue v-model="modelValue" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import JsonEditorVue from 'json-editor-vue';
interface Props {
modelValue: any;
}
const props = defineProps<Props>();
const modelValue = ref(props.modelValue);
</script>What is actually happening?
Instead I got this error:
Could not find a declaration file for module 'json-editor-vue'. '/workspace/node_modules/json-editor-vue/dist/json-editor-vue.umd.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/json-editor-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'json-editor-vue';`ts(7016)System Info
System:
OS: Linux 5.15 Alpine Linux
CPU: (4) x64 12th Gen Intel(R) Core(TM) i5-12400
Memory: 1.73 GB / 5.80 GB
Container: Yes
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.20.1 - /usr/bin/node
npm: 7.24.2 - /workspace/node_modules/.bin/npm
npmPackages:
@fortawesome/fontawesome-free: ^6.4.0 => 6.4.0
@fortawesome/fontawesome-svg-core: ^6.4.0 => 6.4.0
@fortawesome/free-brands-svg-icons: ^6.4.0 => 6.4.0
@fortawesome/free-regular-svg-icons: ^6.4.0 => 6.4.0
@fortawesome/free-solid-svg-icons: ^6.4.0 => 6.4.2
@fortawesome/vue-fontawesome: ^3.0.3 => 3.0.3
@fullcalendar/core: ^6.1.8 => 6.1.8
@fullcalendar/daygrid: ^6.1.8 => 6.1.8
@fullcalendar/interaction: ^6.1.8 => 6.1.8
@fullcalendar/vue3: ^6.1.8 => 6.1.8
@h-hg/docsify-image-caption: ^0.1.2 => 0.1.2
@jamescoyle/vue-icon: ^0.1.2 => 0.1.2
@markbattistella/docsify-sidebarfooter: ^4.0.0 => 4.0.0
@mdi/font: ^7.0.96 => 7.2.96
@mdi/js: ^7.2.96 => 7.2.96
@rodrigogs/mysql-events: ^0.6.0 => 0.6.0
@shopify/draggable: ^1.0.0-beta.12 => 1.0.0-beta.12
@ttskch/select2-bootstrap4-theme: ^1.5.2 => 1.5.2
@types/leaflet.fullscreen: ^1.6.1 => 1.6.1
@types/lodash: ^4.14.197 => 4.14.197
@vitejs/plugin-vue: ^4.2.3 => 4.2.3
@vue-leaflet/vue-leaflet: ^0.9.0 => 0.9.0
@vue/test-utils: ^2.4.0 => 2.4.0
@vueuse/core: ^10.1.0 => 10.1.2
accounting-js: ^1.1.1 => 1.1.1
animate.css: ^4.1.1 => 4.1.1
apexcharts: ^3.35.3 => 3.41.0
autobahn-browser: ^20.9.2 => 20.9.2
axios: ^0.21.1 => 0.19.2
bootbox: ^5.5.2 => 5.5.3
bootstrap: ^4.6.2 => 4.6.2
bootstrap-fileinput: ^5.1.5 => 5.5.2
bootstrap-slider: ^11.0.2 => 11.0.2
bootstrap4-datetimepicker: ^5.2.3 => 5.2.3
clipboard: ^2.0.6 => 2.0.11
cross-env: ^7.0 => 7.0.3
cssmin: ^0.4.3 => 0.4.3
currency.js: ^2.0.4 => 2.0.4
cz-conventional-changelog: ^3.3.0 => 3.3.0
datatables.net-bs4: ^1.10.23 => 1.13.4
datatables.net-buttons-bs4: ^1.6.5 => 1.7.1
datatables.net-colreorder-bs4: ^1.5.3 => 1.6.2
datatables.net-fixedcolumns-bs4: ^3.3.2 => 3.3.3
datatables.net-fixedheader-bs4: ^3.1.8 => 3.3.2
datatables.net-responsive-bs4: ^2.2.7 => 2.4.1
datatables.net-rowgroup-bs4: ^1.1.2 => 1.3.1
datatables.net-rowreorder-bs4: ^1.2.7 => 1.3.3
daterangepicker: ^3.1.0 => 3.1.0
dayjs: ^1.8.36 => 1.11.8
docsify: ^4.13.0 => 4.13.0
docsify-copy-code: ^2.1.1 => 2.1.1
docsify-drawio: ^1.0.6 => 1.0.7
docsify-plugin-flexible-alerts: ^1.1.1 => 1.1.1
docsify-updated: ^1.0.5 => 1.0.5
domurl: ^2.3.4 => 2.3.4
easytimer.js: ^4.3.4 => 4.5.4
echarts: ^5.1.2 => 5.4.2
emails-input: ^1.0.0 => 1.0.0
excellentexport: ^3.9.6 => 3.9.6
express: ^4.17.1 => 4.18.2
faker: ^5.5.3 => 5.5.3
fullcalendar: ^5.9.0 => 5.11.5
gasparesganga-jquery-loading-overlay: ^2.1.7 => 2.1.7
glyphicons-only-bootstrap: ^1.0.1 => 1.0.1
heatmap.js: ^2.0.5 => 2.0.5
html-to-image: ^1.9.0 => 1.11.11
html2canvas: ^1.4.1 => 1.4.1
jquery: ^3.6.0 => 3.7.0
jquery-confirm: ^3.3.4 => 3.3.4
jquery-sortablejs: ^1.0.1 => 1.0.1
jquery.json-viewer: ^1.4.0 => 1.5.0
jquery.redirect: ^1.1.4 => 1.2.0
jsbarcode: ^3.11.5 => 3.11.5
jsdom: ^22.1.0 => 22.1.0
json-editor-vue: ^0.10.15 => 0.10.15
jspdf: ^2.5.1 => 2.5.1
jspdf-autotable: ^3.5.31 => 3.5.31
jszip: ^3.6.0 => 3.10.1
laravel-mix: ^6.0.49 => 6.0.49
laravel-mix-eslint: ^0.2.0 => 0.2.0
latest-version: ^5.1.0 => 5.1.0
leaflet: ^1.9.3 => 1.9.4
leaflet-extra-markers: ^1.2.1 => 1.2.2
leaflet-heatmap: ^1.0.0 => 1.0.0
leaflet-layervisibility: * => 0.1.0post1
leaflet-rotatedmarker: ^0.2.0 => 0.2.0
leaflet.fullscreen: ^2.4.0 => 2.4.0
leaflet.heat: ^0.2.0 => 0.2.0
leaflet.marker.slideto: ^0.2.0 => 0.2.0
lodash: ^4.17.19 => 4.17.21
lodash-es: ^4.17.21 => 4.17.21
mburger-css: ^1.3.3 => 1.3.3
mmenu-js: ^8.5.24 => 8.5.24
moment: ^2.29.4 => 2.29.4
moment-with-locales-es6: ^1.0.1 => 1.0.1
nodemon: ^2.0.12 => 2.0.22
noty: ^3.2.0-beta-deprecated => 3.2.0-beta-deprecated
npm: ^7.11.1 => 7.24.2
pdfmake: ^0.1.71 => 0.1.72
pm2: ^5.1.2 => 5.3.0
prettier: ^3.0.3 => 3.0.3
primeflex: ^3.3.0 => 3.3.1
primeicons: ^6.0.1 => 6.0.1
primevue: ^3.27.0 => 3.29.2
prismjs: ^1.29.0 => 1.29.0
pusher-js: ^7.0.3 => 7.6.0
redom: ^3.27.1 => 3.29.1
resolve-url-loader: ^2.3.1 => 2.3.2
sass: ^1.20.1 => 1.63.2
sass-loader: ^8.0.0 => 8.0.2
screenfull: ^5.1.0 => 5.2.0
select2: ^4.0.13 => 4.0.13
select2-bootstrap4-theme: ^1.0.0 => 1.0.0
smartwizard: ^5.1.1 => v5.1.1
socket.io: ^4.2.0 => 4.6.2
socket.io-client: ^4.2.0 => 2.4.0
sortablejs: ^1.13.0 => 1.15.0
sql-events-listener: ^1.0.0 => 1.0.0
tf-vue-leaflet-heatmap: ^1.0.0 => 1.0.0
ts-loader: ^9.4.4 => 9.4.4
tui-calendar: ^1.13.0 => 1.15.3
tui-dom: ^3.0.0 => 3.0.0
typescript: ^5.2.2 => 5.2.2
uglify-js: ^3.13.4 => 3.17.4
uglify-js-es6: ^2.8.9 => 2.8.9
url-template: ^3.1.0 => 3.1.0
vanilla-jsoneditor: ^0.18.3 => 0.18.3
viewerjs: ^1.9.2 => 1.11.3
vitest: ^0.33.0 => 0.33.0
vue: ^3.2.47 => 3.3.4
vue-axios: ^3.5.2 => 3.5.2
vue-cli: ^2.9.6 => 2.9.6
vue-loader: ^16.8.3 => 16.8.3
vue-sse: ^2.5.2 => 2.5.2
vue2-leaflet-hotline: ^1.0.1 => 1.0.1
vue3-apexcharts: ^1.4.1 => 1.4.1
vuetify: ^3.2.4 => 3.3.3Package Manager
npm
Any additional comments?
I managed to make it work by adding the following code in the shims-vue.d.ts file in the root folder of my app:
declare module 'json-editor-vue' {
import { Component } from 'json-editor-vue/dist/src/Component';
export default Component;
}Am I missing something? Shouldn't it have worked without having to do all that?
Type Check Errors After Updating To v0.15.0
Before you start, please make sure to:
- Read the document
- Have tried the latest version
- Search to see if your issue already exists
- Look for Q&A through appropriate channels like Stack Overflow
Link to minimal (but complete) reproduction
Describe the bug and steps to reproduce
After updating to v0.15.0 I get type check errors when using template refs, binding a class or binding mode
Steps to Reproduce:
- Make sure that you configured and started the Vue language Server in your IDE
- Upgrade
json-editor-vuetov0.15.0 - Refresh/Restart Vue Language Server (this step isn't necessary since the server auto refresh in most cases)
System Info
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.1
npmPackages:
@babel/types: ^7.24.0 => 7.24.0
@commitlint/cli: ^19.3.0 => 19.3.0
@commitlint/config-conventional: ^19.2.2 => 19.2.2
@types/lodash: ^4.17.0 => 4.17.0
@types/node: ^20.12.7 => 20.12.7
@typescript-eslint/eslint-plugin: ^7.7.1 => 7.7.1
@typescript-eslint/parser: ^7.7.1 => 7.7.1
@unhead/vue: ^1.9.7 => 1.9.7
@vitejs/plugin-vue: ^5.0.4 => 5.0.4
@vue/eslint-config-typescript: ^13.0.0 => 13.0.0
@vue/language-server: ^2.0.14 => 2.0.14
@vueuse/core: ^10.9.0 => 10.9.0
@vueuse/integrations: ^10.9.0 => 10.9.0
eslint: ^8.57.0 => 8.57.0
eslint-config-prettier: ^9.1.0 => 9.1.0
eslint-plugin-i: 2.29.1
eslint-plugin-prettier: ^5.1.3 => 5.1.3
eslint-plugin-vue: ^9.25.0 => 9.25.0
eslint-plugin-vuetify: ^2.4.0 => 2.4.0
husky: ^9.0.11 => 9.0.11
json-editor-vue: ^0.15.0 => 0.15.0
lint-staged: ^15.2.2 => 15.2.2
lodash: ^4.17.21 => 4.17.21
postcss-html: ^1.6.0 => 1.6.0
prettier: ^3.2.5 => 3.2.5
rollup-plugin-visualizer: ^5.12.0 => 5.12.0
sass: ^1.75.0 => 1.75.0
simple-access: ^2.0.3 => 2.0.3
stylelint: ^16.4.0 => 16.4.0
stylelint-config-prettier-scss: ^1.0.0 => 1.0.0
stylelint-config-recess-order: ^5.0.1 => 5.0.1
stylelint-config-recommended: ^14.0.0 => 14.0.0
stylelint-config-recommended-scss: ^14.0.0 => 14.0.0
stylelint-config-recommended-vue: ^1.5.0 => 1.5.0
stylelint-prettier: ^5.0.0 => 5.0.0
typescript: ^5.4.5 => 5.4.5
unplugin-auto-import: ^0.17.5 => 0.17.5
vite: ^5.2.10 => 5.2.10
vite-plugin-vuetify: ^2.0.3 => 2.0.3
vue: ^3.4.24 => 3.4.25
vue-eslint-parser: ^9.4.2 => 9.4.2
vue-router: ^4.3.2 => 4.3.2
vue-tsc: ^2.0.14 => 2.0.14
vuedraggable: ^4.1.0 => 4.1.0
vuetify: ^3.5.17 => 3.5.17Package Manager
npm
Not working with vue 3 and nuxt 3
I'm trying to add this in my nuxt 3 applications. But I'm facing a problem to add this. For this, I'm using version 0.4.8. If I try to install the latest version I got this error.
This is how I use it.
<script setup>
import JsonEditorVue from "json-editor-vue";
const value = ref('')
</script>
<template>
<JsonEditorVue v-model="value" />
</template>
And this is the error I'm getting.
在Vue 2.6版本中使用报错
项目中使用了inject
全局注册json-editor-vue
控制台报错
inject() can only be used inside setup() or functional components.
feat: Expose nodes that are being highlighted
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
What problem does this feature solve?
In readonly mode, the user can select the corresponding node, which often needs to obtain the information of the user's click in another scenario. So I wonder if I can throw an event to the outside when the user clicks on the node
What does the proposed API look like?
| Name | Description | Type |
|---|---|---|
| click | triggers after a node click | ^[Function]`(node: any, clickNode:string === 'key' |
First modification in JSON is not propagated
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
Link to minimal reproduction
Steps to reproduce
Step 1.: edit the value "1" to "2" in the JSON editor and hit Enter (or click outside to validate the edit).
Step 2.: edit the value "2" to "3" in the JSON editor and hit Enter (or click outside to validate the edit).
What is expected?
After step 1., "Value in JSON:" should be "2".
After step 2., "Value in JSON:" should be "3".
What is actually happening?
After step 1., "Value in JSON:" is still "1". <= this is incorrect
After step 2., "Value in JSON:" is "3". <= this is OK
So in short, the first edit is not propagated to the reactive variable containing the JSON data. After the second edit, the propagation is restored.
System Info
Tested on latest versions of Firefox and Chrome, on macOS Ventura 13.6.1.
Package Manager
None
Any additional comments?
If I set the value of the JSON editor synchronously this behavior doesn't happen.
This only happens when the value is set asynchronously (simulated in the repro with the setTimeout).
renderJSONSchemaEnum doesn't work with Vue
Before you start, please make sure to:
- Read the doc
- Have tried the latest version
- Search to see if your issue already exists
- Look for / ask questions on Stack Overflow
Link to minimal reproduction
https://stackblitz.com/edit/vite-jvfit6?file=src%2FApp.vue
Steps to reproduce
Create an example with enums and use renderJSONSchemaEnum like in the stackblitz example.
What is expected?
Having the enums rendered in a different way like a select component with clickable select options.
What is actually happening?
Nothing special, it is rendered the same way as without renderJSONSchemaEnum
System Info
"dependencies": {
"vue": "^3.2.6",
"json-editor-vue": "^0.11.0",
"vanilla-jsoneditor": "^0.18.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vue/compiler-sfc": "^3.2.6",
"typescript": "^4.3.2",
"vite": "^2.5.4",
"vue-tsc": "^0.2.2"
}Package Manager
npm
Any additional comments?
No response
Prop type / Event type does not appear
On the bright side,
Auto import on nuxt 3 works.
The component correctly give out div's type.
可以设置语言的么，想设置中文语言。
我看了svelte-jsoneditor的参数，好像并没有设置语言的字段。请教一下，可以把菜单按钮设置为中文么？
在jsoneditor中是提供了i18n，可以设置中文的，但是功能又没有那么多。
怎么定制化菜单？
你好，在我的项目里面我只想保留text、tree这两个，其他的table、Sort、Transform想去掉，如何实现呢？再次感谢！🙏
v-model doesn't work when :onChange is used
I'm trying to access contentErrors through :onChange. Without :onChange v-model binds the value to the prop I gave (which is a computed value, an object ). But with :onChange it doesn't. I checked the issues #17 #18 but I'm not able to implement it properly.
I'm using "vue": "^2.6.11"
My main goal is to not accept the value when there are errors in it (text mode) i.e. there's an ACCEPT button which gets disabled. Or instead of :onChange is there any other alternative? Like :onError, but it's not working. I guess it serves a different purpose.
<JsonEditorVue
v-model="deviceCurated.properties"
:mode.sync="text"
:class="$vuetify.theme.dark ? 'jse-theme-dark' : ''"
:mainMenuBar="false"
:onChange="(updatedContent, previousContent, { contentErrors }) => {jsonChange(updatedContent, contentErrors)}"
/>
get deviceCurated(): any {
return { properties: {} };
}
jsonChange(updatedContent: TextContent, contentErrors: ContentErrors) {
console.log(this.deviceCurated.properties);
// console.log(updatedContent.text);
Object.keys(contentErrors).forEach((e: string) => {
if(e === 'validationErrors') this.isJsonError = false;
if(e === 'parseError') this.isJsonError = true;
})
}Also after editing the value (when v-model works), instead of an object/json, it's giving a string (maybe because of text mode). So I'm doing JSON.parse(). Is there a better way?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.