v-if condition ruins the json editor visualization

[giuliohome]

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 dev

You 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

[giuliohome]

Thank you ❣️ Yes, the 🏷️ latest v0.13.2 release fixes this issue! 🎉

[cloydlau]

You can support this repository by giving it a Star, thanks.

[giuliohome]

Certainly, I had already put my star on the repository, I will spread the word on social media.

[giuliohome]

@cloydlau

Still a question:

After the json is edited, its type changes from object to string: can this be fixed too?

[giuliohome]

Refer to the branch typeissue

https://github.com/giuliohome-org/repro-jsoneditor-issue/blob/typeissue/src/components/HelloWorld.vue#L38

          <div v-if="switchMe" > read only</div> 
          <JsonEditorVue v-else v-model="myJSON" />
          <span>{{ typeof(myJSON) }}</span> 

Note that at the beginining it shows

but after a change

[cloydlau]

See #71

[giuliohome]

Uhm, so I've translated via google translator but then I landed to this josdejong/svelte-jsoneditor#166 (comment) which is in English and better for me.

So my fix in Vue 3 would be this one

const updatedContent = (myupdate: any) => {
  console.log("my update", myupdate);
  myupdate.json = JSON.parse(myupdate.text);
  myupdate.text = undefined
}

and

<JsonEditorVue v-else v-model="myJSON" :onChange="updatedContent" />

see my commit giuliohome-org/repro-jsoneditor-issue@2dbd3f6

Makes sense?

[cloydlau]

I'm afraid there might be bugs in your code, as you have not considered other modes or edge cases. I recommend that you thoroughly read this: josdejong/svelte-jsoneditor#166 to get a better understanding.

[giuliohome]

I mean... that it is restricted to my scenario, where I only use the text mode. Do you see possible bugs if the mode is always text and the menu is hidden?

createApp(App)
  .use(JsonEditorVue, {
    "mode":"text", "mainMenuBar": false
  }).mount('#app')

Thanks

[cloydlau]

Trust me, that's still buggy. I've mentioned that there are edge cases. I suggest reading josdejong/svelte-jsoneditor#166 thoroughly. You will understand what I'm talking about.

[giuliohome]

Thanks, I understand, but the default behaviour is not usable for me in my code context. I have to call an API and I can't use a string as it is returned for sure.

More or less this snippet should suffice for my use case.

const updatedContent = (myupdate: any) => {
  console.debug("textual update", myupdate);
  if (myupdate.text !== "") {
    try {
      myupdate.json = JSON.parse(myupdate.text);
    } catch {
      console.debug("json is not valid: do nothing");
      return;
    }
  } else {
    myupdate.json = {};
  }
  myupdate.text = undefined;
  console.debug("parsed update", myupdate.json);
}

[cloydlau]

This is a very popular issue, and I have written the content below into the document:

If you want to ensure you always get parsed JSON in text mode:

Caution

Not performant for large JSON documents.

createApp(App)
  .use(JsonEditorVue, {
    mode: 'text',
    mainMenuBar: false,
    onChange(updatedContent) {
      if (updatedContent.text) {
        try {
          updatedContent.json = JSON.parse(updatedContent.text)
        }
        catch {}
        updatedContent.text = undefined
      }
    },
  })
  .mount('#app')

or without try...catch:

<JsonEditorVue
  ref="jsonEditorVueRef"
  mode="text"
  :main-menu-bar="false"
  :on-change="(updatedContent) => {
    if (updatedContent.text) {
      if (!jsonEditorVueRef.jsonEditor.validate()) {
        updatedContent.json = JSON.parse(updatedContent.text)
      }
      updatedContent.text = undefined
    }
  }"
/>

[giuliohome]

Thank you @cloydlau for your reply ❣️

Will commit and try your suggestion asap on my project.

Best regards
Giulio

[giuliohome]

Cool 🆒 as I like to define it at the main app level, because it allows me to reduce the proliferation of onChange functions for multiple JSON editor tags. However, I'm afraid I can't access the jsonEditorVueRef at that level.

app.use(JsonEditorVue, { 
  mode: "text", 
  mainMenuBar: false,
  onChange: (updatedContent: any) => {
    if (updatedContent.text) {
      try {
        updatedContent.json = JSON.parse(updatedContent.text)
      }
      catch { }
      updatedContent.text = undefined
    }
  }
});

[cloydlau]

I can't access the jsonEditorVueRef at that level

It's possible with the ability of https://github.com/cloydlau/vue-global-config (another lib I created). But at the moment I don't see the necessity for it.

[cloydlau]

@giuliohome Hello, in version 0.14.0 you can accomplish this in a more elegant way:

Caution

• Not performant for large JSON documents.
• Adjust the debounce value based on the size of your JSON.
• Will output empty value when the input value is invalid.

<JsonEditorVue mode="text" :stringified="false" :debounce="1000" />

[giuliohome]

Thank you very much in advance!
I'll upgrade today or tomorrow at the latest.
It looks very good!

[giuliohome]

Will try soon. Meanwhile, a quick question in principle: While I don't think I have any performance issues, hence I will possibly reduce the debounce to 500 or even less, I'm wondering what it implies for a "save" button handler. Should it:

1. Put the JSON editor in read-only mode
2. Wait for the debounce time before reading the JSON value and starting its action? (this is the question)
3. Do what it is supposed to do and give feedback...
4. Put the editor in read-write mode

Correct? Thanks again!

[cloydlau]

debounce refers to the interval time between your last input and the update of the binding value, which defaults to 100 milliseconds. You haven't encountered performance issues because the performance of json-editor-vue itself is not bad, and your JSON document is not large enough.

[giuliohome]

I know that. So, as a double check that my understanding is right, I'm saying that it implies that a click event handler should wait for the debounce interval time as well, before starting its action with the json value, do you agree?

[cloydlau]

Certainly. Otherwise you might get dirty data. That's why I made it configurable.

[giuliohome]

Excellent! Thank you for your help and support!