Блог

Я пытаюсь заставить анимацию Lottie работать с Vue с помощью vue-lottie, и я следую примеру кода, используемого в репозитории, но когда я пытаюсь запустить код, я вижу следующую ошибку в консоли:

 [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)

 

После долгих поисков в Google я нашел решение, описанное здесь:

Решение:

Вместо того, чтобы импортировать данные анимации, подобные этому (как показано в примере):

import * as animationData from '../path/to/the/animationData.json'

…вместо этого импортируйте его следующим образом:

import animationData from '../path/to/the/animationData.json'

Итак, минимальный рабочий пример использования vue-lottie в вашем собственном коде будет выглядеть так:

 <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>