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.