Renderizar Vue JSONForms sin empaquetado

Resumen

Este artículo aborda el desafío de crear una aplicación de una sola página (SPA) usando Vue y JSONForms sin utilizar un empaquetador. Se proporciona un ejemplo de código que implementa tres vistas diferentes (JSON Forms, Pre y Table), pero se enfrenta a un problema donde la pestaña de JSON Forms se muestra vacía, a pesar de que parece que JSONForms está registrado correctamente.

Problemas identificados

1. Pestaña de JSON Forms vacía: Aunque no se producen errores de carga, la sección JSON Forms no muestra ningún contenido.

2. Errores de la estructura del esquema: Alterar el esquema provoca errores, lo que sugiere que la carga de JSONForms y la estructura del esquema están funcionando, pero no se están representando correctamente en la interfaz de usuario.

Solución propuesta

Para resolver el problema de la pestaña de JSON Forms vacía, se deben verificar los siguientes puntos en la implementación:

1. Inicialización de datos y propiedades: Asegurarse de que los datos, el esquema y el UI esquema estén correctamente inicializados y sean válidos.

2. Uso de la propiedad currentView: Parece que la propiedad currentView se inicializa en 'home', lo que puede causar que cuando se intenta acceder a la pestaña de JSON Forms, no se cargue correctamente. Se debe inicializar correctamente para que muestre la vista de JSON Forms al comenzar.

3. Comprobar el ciclo de vida de Vue: Verifica que la renderización de JSONForms ocurra después de que el componente haya sido montado.

Ejemplo de ajustes a realizar

El siguiente ajuste puede implementarse:

createApp({
    components: {
        'my_json_forms': MyJsonForms,
        'my_pre': MyPre,
        'my_table': MyTable,
    },
    data() {
        return {
            currentView: 'my_json_forms', // Inicializa directamente en JSON Forms
        };
    }
}).mount('#app');

Al iniciar la aplicación directamente en my_json_forms, puedes comprobar si los datos y el esquema se están mostrando correctamente.

Conclusión

Siguiendo estos pasos y haciendo ajustes en la inicialización de la vista, el problema de la pestaña de JSON Forms vacía debería resolverse, permitiendo una correcta visualización de los formularios JSON en la aplicación Vue sin necesidad de empaquetado.