TypeError：使用 vue-lottie 时无法读取未定义的属性（读取“长度”）

Question

我正在尝试使用vue-lottie来获取与 Vue 一起使用的 Lottie 动画，并且我正在遵循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

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

解决方案：

而不是像这样导入动画数据（如示例所示）：

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>