Estoy desarrollando una aplicación Nuxtjs/Vuejs
para convertir XML->JSON
y viceversa. Los usuarios pueden proporcionar los valores al área de texto y textarea
administra estas textareas
de CodeMirror
.
El área de textarea
está vinculada al V-model
de la Vex Store
. He agregado Watchers
en estas variables de estado de Vuex
, por lo que cada vez que cambian los valores, quiero convertir los datos respectivos a un formato diferente. Es decir, si el valor XML
cambia, XML
debe convertirse a JSON
. De manera similar, si el valor de JSON
cambia, JSON
debe convertirse a XML
.
Cuando copio y pego el XML
en el área de XML textarea
, por primera vez funciona perfectamente, pero realizo cualquier modificación e intento introducir algún error de Syntax
en XML
, luego me encuentro con el problema en el que los watchers
comienzan a llamarse entre sí y terminan en bucles interminables. .
He proporcionado el código de muestra dentro de CodeSandbox
: https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
Pasos para recrear el problema:
Sample XML
en el XML Area
: <root> <name>Batman</name> </root>
Obtenemos el resultado como: CONVERT TO JSON-LD
dentro del área de JSON textarea
XML
dentro del XML Textarea
eliminando alguna pestaña de anchor
( </>
) Ahora, ambas áreas de textarea
se completan con un Error Message
, pero en realidad solo quiero que el área JSON
se complete con un Error Message
que indique qué está mal en XML y XML Modified XML
debe ser como está dentro del XML Area
.
Si observa la Console
, puede ver que me encuentro con un cyclic issue
debido a los watchers
. Quiero llamar a jsonConverter
siempre que el valor XML
cambie dentro del XML Editor
y viceversa, pero no quiero ingresar a XMLConverter
después de converting
a JSON
.
¿Puede alguien explicarme cómo puedo evitar este problema? Me estoy quedando sin ideas ya que no puedo obtener onChange
para CodeMirror
directamente. Estoy usando Watchers
. Si alguien tiene alguna idea o solución, sería genial, ya que dediqué más de un día a resolver esto, pero terminé sin nada.
CodeSandBox: https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
Creo que el problema principal aquí es que sus valores JSON y XML se controlan en demasiados lugares. Los v-model
s, los observadores y los eventos de CodeMirror.
Cambié su código y convertí a CodeMirror en el controlador principal de los valores. Puedes ver el resultado aquí: CodeSandbox
Para evitar el ciclo de análisis, comparé los nuevos valores con los guardados en la tienda. Si son iguales, el valor lo hemos fijado nosotros. Si difieren, entonces el usuario lo ha cambiado y deberíamos intentar analizarlo.