将 JSON 对象/字符串加载到 src 属性中的彩票播放器不起作用

Question

我在Vue.js项目中使用了集成了乐透互动功能的乐透播放器。我遇到了一个我无法解决的问题。当我将.json文件的链接传递给lottie播放器时，动画加载良好，而如果我尝试直接传递json字符串/对象，它似乎不会加载。如有任何帮助，我们将不胜感激。

这是我的代码：

<template>
<lottie-player 
:id='lottie.id'
:class="lottie.class"
:ref='lottie.id'
:src='lottie.file'>
</lottie-player>

<script>
import "@lottiefiles/lottie-player"
import { create } from '@lottiefiles/lottie-interactivity'
export default {
name: 'LottieAnimation',
props:{
lottie: {
type: Object
}
},
mounted(){
console.log(this.lottie.file)
this.$refs[this.lottie.id].addEventListener('load', () => {
create({
mode: this.lottie.mode,
player: '#' + this.lottie.id,
container: this.lottie.container,
actions: this.lottie.actions
});
})
}
}
</script>

Answer 1

您的问题可能是初始src是null，而在下一个渲染中src是json。如果src发生更改，lottie-player将不会重新渲染-Git问题。

JSON对象作为src属性工作，但您需要使用JSON.stringify(json)。

您可以收听src的更改，然后使用新的src再次加载播放器。这是React中的例子，但它会导致眨眼效果，这不是很好。

useEffect(() => {
if (!prevSrc || prevSrc === src) {
return;
}
const lottiePlayer = document.getElementById(`lottie-player-${src}`);
if (lottiePlayer) {
lottiePlayer.load(src);
}
}, [src, prevSrc]);