how can i add comments

I hope a change event will be emitted when the json has changed. Thanks

      if (error) {
        this.$emit("error")
      }

As a result, attempts to handle errors in the component only receive undefined in all cases.

I think this should be

      if (error) {
        this.$emit("error", error)
      }

options我是这样定义的

options: {
onChange: (e) => {
console.log(e)
},
mode: 'code'
}

I have not had any luck getting the onValidate and validate() functions to work of the native jsoneditor via the options and refs respectively. According to the change log on yarn it's part of one of the last updates and I'm wondering if your plugin is capturing this or not. Both functions do not work with your latest build.

onError is successfully called when an error exists within the json, but onError isn't being called when clicking one of these buttons (format, sort, repair, etc) when an error exists within the json. See my attached photo, where you can see my error function printing out the validation error, but when I attempt to change modes with the error still there, the error isn't caught (the red text in the photo)

Edit: reinstalling the module actually fixed this issue for me.

I am trying to use this package but it does not work with nuxtjs. Basically what I did is described below:

npm install v-jsoneditor --save

import VJsoneditor from 'v-jsoneditor'

....

components: {
    VJsoneditor
  }

And the I try to use the component like below:

<VJsoneditor v-model="val" />

but it throws an error as below:

ReferenceError
self is not defined

Also tried to set fetchOnServer: false for that component and still does not work. Also, wrapping the code with tag does not help either.

Any idea how to make this work ?

Referring tot his thread josdejong/jsoneditor#1362 (comment)
seems somebody fixed this issue but not sure he changed the whole project to render on client side or just that particular component.

Hi,
How could I check for errors before submit the edited json?
Psedo-code:
if (json is valid){
submit form with json
}

I used v-jsoneditor component in my website.
it works on Chrome, Safari or even IE11.
But when I write a not validated json then it didn't show any alert message in IE11. (Working on Chrome, Safari)
How can I solve the problem?

Here is my code.

<template>
  <v-jsoneditor
                v-model="config"
                :options="options"
                :plus="false"
                height="800px"
                style="width: 800px;"
  />
</template>

and the error message in console.

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode
v-jsoneditor.min.js (30,17081)

1. 如果数据不是JSON格式的话会触发error 如图：
   
2. 如果刚开始有默认值的话，挨个删除字符串直至把数据删除完。也会触发error。如图：
   
   导致的结果：
   在v-model双向绑定的模式下，想要清空传入的变量的话只能赋值null,或者{}。
   期望改进：
   删除是空内容的话也能触发v-model 把变量赋值成{} 或者null。至少不能还保留默认数据。
   比如默认值 {"a":"b"} 如果挨着删除内容的话。变量是不会变的。造成视觉上以为删除成功了。

I am using v-jsoneditor along with html form, I want to make 2 way editing , but editor data is not updated when model data is updated using form or Vue tab editor.

Am I doing something wrong , Value in v-jsoneditor is changed but not reflected in editor itself

How can I change the textarea font size?

在Vue 2.0 结合ts使用的时候发现上述标题错误

Below is my code:

  <VJsoneditor
    v-model="val"
    :height="'400px'"
    :plus="plus"
    :options="options"
  />

   options: {
      mode: 'code',
      modes: ['text', 'code', 'view'],
      enableSort: false,
      enableTransform: false,
      navigationBar: true,
      statusBar: true,
      history: false,
      search: false
    }

  computed: {
    plus () {
      return this.options.mode === 'code'
    }
  }

In this case the fullscreen button appears correctly because the first selected mode is code, but in case I set another value, for example text, and then switch to code from the dropdown, the button does not appear anymore.

Is this a bug or I am doing something wrong ?

I'd like to highlight (preferrably in yellow or the like) a line on load. Is that possible and if not, could it be implemented?

Currently, when using v-json-editor together with tailwind < 2, the tailwind spin animation is replaced by the spin animation from v-json-editor, or to be more specific, from the animation defined by the json-editor dependency. I already renamed the spin animation in json-editor and a new version 9.4.0 has been released with the fix. Could you consume this version to avoid the collissions?

Here's the (already merged) PR:
josdejong/jsoneditor#1333

And the fix has been published in this version:
https://github.com/josdejong/jsoneditor/releases/tag/v9.4.2

再使用v-jsoneidtor时，发现格式化json后，点击变量，鼠标的光标偏移了，明明是5个0，00000现在鼠标点击到末尾，光标在第3个0 。000|00

希望可以支持以下功能

• 比如选中key_template
• 支持快捷键(比如cmd + j，也能支持自定义),复制object.keys.0key_template到粘贴板
• 支持快捷键(比如cmd + k,也能支持自定义),复制key对应的valuefy:dm:se:v99:hc0到粘贴板

如果通用性不够，希望可以给点提示，我自己实现。
我找不到获取当前选中元素jsonpath的方法

when the content is String, the editor shows quotes.

how to remove these quotes？

Doing following on version: 1.4.4 gives error 'assets/plus.svg' not found.
yarn add v-jsoneditor

Resolution:
add plus.svg to package or point it somewhere else.
This is being thrown from the .max-btn class in css even though it is not being used.

Hi.
i cant understand onClassName option.
how to use that?
ex) if select city, add class to city

<v-jsoneditor v-model="cities" :options="vjsonOpt"></v-jsoneditor>

<select cities.....  v-model='city'>
  <option ...>
...
<script>
export default {
  data() {
    return {
      city: null,
      vjsonOpt: {
        mode: 'view',
        onClassName: function(node) {
           if (this.city) {
             if (node.field == 'london') {
               // set textRed
             } else if (node.field == 'newyork') {
               // set textBlue
             } else {
             }
          }
        }
      },
      cities: {
        london: 'uk',
        newyork: 'usa'
        ottawa: 'canada',
        paris: 'france'
      }
    }
  },
  methods: {
  }
}
</script>
<style>
.textRed {color: #e42e21;}
.textBlue {color: #1404ee;}
</style>

我们一般在写第三方组件时，css都不加scoped，原因是需要方便人修改，如果加上scoped后，权重就超过单独的类，所以一般是要去掉scoped：

例如： 我需要修改一下代码：

.jsoneditor-container.min-box {
  min-width: auto;
}

以上是无法修改成功的

需要

.jsoneditor-container.min-box {
  min-width: auto !important;
}

或者再加一个父类

<v-jsoneditor ref='vje' id="ved" v-model="row.value" :options="options" :plus="false" @error="onError"/>

public validator() { return (this.$refs.vje as VJsoneditor).validate(); }

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$refs.vje.validate is not a function"

How do I check if JSON is valid?

I'm not entirely sure, but since this is using ace underneath can I still change the theme? If so how?

Hey,
is the component ready to be used in Vue3 projects?

I want to use it in an electron application but I receive various errors during rendering.

I am quite new to Vue.js, therefor I am not sure if the problem is on my side.

Regards

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <v-jsoneditor v-model="json" height="400px"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import VJsoneditor from 'v-jsoneditor'

export default {
  name: 'App',
  data () {
      return {
        json: {
          msg: 'demo of jsoneditor'
        }
      }
    },
  components: {
    HelloWorld,
    VJsoneditor    
  },
  methods: {
      onJsonChange (value) {
        console.log('value:', value)
      }
    }
}
</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>

@error="onError" returns only true, but when content changes and there is no errors, event doesn't return anything, how do I know that error doesn't persist anymore?

只要添加 :height="100px" 就会报错

Hi all, is it possible to create a function that will pass to an object using vue.js tools. I have a very large json

{"name":"Hellow",
"format": [
{
"isDefault": false,
"identifier": "16:9",
"referenceHeight": 1080
},
{
"isDefault": false,
"identifier": "1:1croped",
"referenceHeight": 1080
},
{
"isDefault": false,
"identifier": "1:1",
"referenceHeight": 1080
},
{
"isDefault": false,
"identifier": "9:16",
"referenceHeight": 1920
},
{
"isDefault": false,
"identifier": "9:16croped",
"referenceHeight": 1920
}
],
}

npm install v-jsoneditor

gives a package with no dist folder. I should not normally have to build my dependencies before using them ... what am I missing?

In tree mode fullscreen dialog displayed behind.
Can i set value z-index for it?

snyk reports that [email protected] poses xss vulnerability.
Its remedy is to upgrade jsoneditor to 9.0.2

https://snyk.io/test/npm/jsoneditor/8.6.8

I installed the package, and then tried to import it globally using exact documentation in the readme,

came back with an error:

ERROR in ./node_modules/v-jsoneditor/src/VueJsoneditor.vue?vue&type=template&id=43c7e374&scoped=true&lang=html& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/html-loader!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/v-jsoneditor/src/VueJsoneditor.vue?vue&type=template&id=43c7e374&scoped=true&lang=html&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

 Errors compiling template:
  text "module.exports = "\n" outside root element will be ignored.

Hi!

How is it possible to use this with nuxtjs?

When I edit this message is displayed inside the console and the editor closes

key "responseExample.text" is value object.

what is the problem ?

@yansenlei

Events on yarnpkg only have an Error callback; but I see a 'this.$emit("input", json)' in your source code; but this method should also appear in Events. So that users can use it better.

When you create a tabbed view with 2 instances of json editor and different options, they share the same options?!?

Hiya, really useful component - thank you for maintaining it :)

I'm using it in one of my projects, but I got a bit confused about what attribution I need to give. The original package, jsoneditor is licensed under Apache-2.0, but this project is MIT. Do I need to then include both licenses?

Could I also make a suggestion, that you credit josdejong for the original project more clearly in the readme, as it looks like he's put a lot of work into this project.

Thanks, Alicia :)

In code mode cursor jumps to start position after json edit.