vue.js - 类型错误 : Cannot read properties of undefined (reading 'length' ) when using vue-lottie

Question

我正在尝试通过使用 vue-lottie 使 Lottie 动画与 Vue 一起工作，我正在关注 the example code used in the repo ，但是当我尝试运行代码时，我在控制台中看到以下错误:

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

Answer 1

经过大量谷歌搜索后，我找到了描述 here 的解决方案:

解决方法:

而不是像这样导入动画数据(如示例所示):

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

...而是像这样导入它:

从“../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>