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