Tengo este extraño error con una ranura que no es confiable en ciertos casos desconocidos.
Hay 3 componentes jerárquicos.
arrayValue .Problema: en lugar de representar el enlace del padre, el html de ranura predeterminado del hijo se representa cuando se cargan nuevos datos .
Mire el campo argumentos additionalArguments , contiene un enlace. Presione ALT+M para simular la obtención de nuevos datos. Ahora, en lugar de representar un enlace, se representa el html de ranura predeterminado para esa ranura con nombre. Puede presionar ALT+J para cargar los datos originales, pero esta vez no hay enlace.
| Datos iniciales (ALT+J) | Datos cargados (ALT+M) | Escribe | Valor igual |
|---|---|---|---|
| marca | calle | falso | |
| común | común | objeto | cierto |
| Organización de ventas | Organización de ventas | objeto | cierto |
| facturas (vacias) | facturas | Arr | falso |
markinvoices no están inicialmente vacías en app.jsmark se elimina de html en orderDataCardsalesOrganisation se elimina de html en orderDataCardinvoiceItems está vacío en orderDataCardObviamente, estas no son soluciones.
En cualquier caso, no hay dependencia ni nada entre ninguno de los campos, por lo que es difícil para mí entender por qué sucede esto y sospecho que se trata de un error con vue. Ya he creado un problema para esto. Sin embargo, los desarrolladores no verán la reproducción, porque piensan que no es mínima como #líneas > 100. Tan pronto como elimino líneas más significativas, el error se resuelve y el código eliminado no es defectuoso, por lo que es muy frustrante trabajar en esto. Todavía podría eliminar líneas que no son significativas, pero eso dificultaría que todos los involucrados entiendan qué datos se están procesando.
¿Alguien puede reconocer el hecho de que este es un problema con vue y que el código no es reducible O (preferiría esto) alguien puede solucionarlo?
Puede que esta no sea la solución, pero podría ayudar a encontrarla:
Noté que estás trabajando con objetos y convirtiéndolos en matrices. Las propiedades de los objetos pueden ser problemáticas para trabajar porque, a diferencia de las matrices, las propiedades actualizadas no se propagan. Este es un problema con JavaScript, no con Vue. Vue solo fue posible debido a la introducción de observadores, pero los objetos aún no son parte de eso.
Puede tener problemas cuando un objeto se actualiza parcialmente.
Sugeriría mirar Vue.set .
El viejo código mío lo invoca explícitamente por window.Vue.set() para cambios en las propiedades del objeto para que Vue pueda propagarlos correctamente.
Eso es una especie de error en Vue, pero nuevamente proviene del propio JavaScript.
No estoy del todo seguro, pero las matrices calculadas no salvan el problema anterior al trabajar con objetos.
Iría por la ruta segura y usaría Vue.set() al actualizar objetos y propiedades de objetos. Todavía puede usar las matrices calculadas entonces.
De lo contrario, lo obvio: haga matrices reales a partir de los objetos en lugar de trabajar con objetos la mitad del tiempo.
¿Hay alguna buena razón por la que esté usando this.process explícitamente en lugar de los accesorios del componente? ¿O es un componente de una biblioteca?
¿Has probado exactamente el mismo código pero sin usar la collapsable-card ? ¿Solo genera el enlace en sí? Podría indicar problemas de ranura en el componente collapsable-card . Tal vez también en parte debido a los objetos de arriba.
El problema está relacionado con el manejo de Vue de múltiples instancias del mismo componente. En OrderDataCard.vue tiene dos instancias de Collapsable-Card sin claves únicas. En este caso:
Vue usa un algoritmo que minimiza el movimiento de elementos e intenta parchear/reutilizar elementos del mismo tipo en el lugar tanto como sea posible.
No sé muy bien cómo funcionan estos algoritmos y por qué, aparentemente, reutilizó la segunda instancia (sin un contenido de ranura definido), pero establecer una clave única para estos componentes resolvió el problema.
Consulte el entorno limitado del código de trabajo: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149 .
Nota: no pude activar eventos de teclado en mi navegador, así que los activé al hacer clic en el botón.