0
1.4K
VistasTypeError: no se pueden leer las propiedades de undefined (leyendo 'longitud') cuando se usa vue-lottie
Estoy tratando de hacer que una animación de Lottie funcione con Vue usando vue-lottie , y estoy siguiendo el código de ejemplo usado en el repositorio , pero cuando intento ejecutar el código, veo el siguiente error en la consola:
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'length')" found in ---> <Lottie> at node_modules/vue-lottie/src/lottie.vue <VSheet> <TheThreeColumnLayOut> at src/components/TheThreeColumnLayout.vue <Dashboard> at src/views/Dashboard.vue <VMain> <VApp> <App> at src/App.vue <Root> TypeError: Cannot read properties of undefined (reading 'length') at completeLayers (lottie.js?94f1:1579) at Object.completeData (lottie.js?94f1:1968) at workerStart (lottie.js?94f1:2071) at Object.postMessage (lottie.js?94f1:1545) at Object.completeAnimation (lottie.js?94f1:2147) at AnimationItem.setupAnimation (lottie.js?94f1:12992) at AnimationItem.setParams (lottie.js?94f1:12970) at Object.loadAnimation (lottie.js?94f1:12711) at Object.loadAnimation (lottie.js?94f1:16474) at VueComponent.mounted (lottie.vue?d421:30)
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Después de mucho buscar en Google, encontré una solución que se describe aquí :
La solución:
En lugar de importar los datos de animación de esta manera (como se muestra en el ejemplo):
import * as animationData from '../path/to/the/animationData.json'
... en lugar de importarlo así:
import animationData from '../path/to/the/animationData.json'
Entonces, un ejemplo de trabajo mínimo del uso de vue-lottie en su propio código se vería así:
<template> <div> <Lottie :options="animationOptions" /> </div> </template> <script> import Lottie from 'vue-lottie/src/lottie.vue' import animationData from '../path/to/your/animation.json' export default { components: { Lottie }, data: function () { return { animationOptions: { animationData: animationData } } } } </script>
·
Santiago Trujillo
Denunciar
Responde la pregunta