bestkolobok / vue3-jsoneditor

https://bestkolobok.github.io/vue3-jsoneditor/
MIT License
49 stars 8 forks source link

Component-bound v-model values are not updated #14

Open snow1101 opened 7 months ago

snow1101 commented 7 months ago

When my component is initialized, the v-model binds to data, and then I paste a piece of code in the editor and find that watch is not triggered

image
bestkolobok commented 7 months ago

Hi @snow1101 Try to usev-model:json or v-model:text instead. v-modeldoesn't always work the way you expect it to

zubozrout commented 1 month ago

Surprisingly I get the same behavior when trying to work with v-model:json, but v-model:text updates for me just fine.

Edit: As it is more useful to me though I need to do this as a dirty workaround:

:onChange="(content, previousContent, changeStatus) => !changeStatus.contentErrors && updateConfig(content.text)"

where updateConfig updates the value on its own: configData.value = JSON.parse(config);

If this is ever fixed by the editor then it would be a double work to do :(, but I don't have a better solution atm.

bestkolobok commented 1 month ago

@zubozrout Thanks for highlighting the problem.

Regarding your case, if I understood correctly, the problem happen when you try to paste a piece of code directly into the editor and get not valid data at the output. So, I want to note that the editor has different behavior depending on the mode (text or tree), and the mode of operation is also determined by whether you use v-model:json or v-model:text, if you have not explicitly specified mode. So, in tree mode (when you use v-model:json), any code you paste into the editor is interpreted as a string. That is, you cannot insert the JSON part, you can only add another field and insert either the name or the value of the field, but in any case, it will be interpreted by the editor as a string. At the same time, in text mode, you can insert a part of a valid JSON into an existing one in the editor, but in text mode, you get only a regular string as an output. This behavior is due to the native behavior of the library I use under the hood. So, you can make a suggestion to change this behavior to the author of this library. And then I'll update update it in vue3-jsoneditor.

Also, in the near future, I will try to experiment with string parsing in text mode, and if it does not break the basic behavior, then I will implement it in vue3-jsoneditor

zubozrout commented 1 month ago

Thank you very much for your reply @bestkolobok. In my case I am in a v-model:json + text mode, but yes, that doesn't propagate any changes back to the original object on its own. My use case is a simple "download json from a server, edit, save", where in order to save it I need to have the updated data available - hence why I am pushing them back to the original object through the onChange event.

With that being said, I am afraid I am not familiar enough with the svelte-jsoneditor to open up an issue, yet I presume if this is not done right within the library then the approach I've chosen is ok.