Not working play event Vue 3.5

[vitaliykoreev]

Overview

Something wrong with play/pause events in my app.

I've just inserted this part of code in my template:

<template>
<DotLottieVue style="height: 350px; width: 350px" autoplay src="/explosion.lottie" ref="playerRef" class="lottie-animation" />
</template>

<script setup>
const playerRef = ref();
</script>

And with "autoplay" and "loop" props it works properly but when I'm trying to run animation manually using play function I'm getting an error TypeError: Cannot read properties of undefined (reading 'play').

I was trying to change playerRef.value.play() into playerRef.value.getDotLottieInstance().play(); but still no.

If someone has the same error could you please help me to fix it.

Thanks to all who reply!

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• Add the Type: Bug label to this issue.

[afsalz]

hi @vitaliykoreev

The example below seems to work as expected. Could you provide a complete example? Also, let us know the version you’re using.

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue';
import { onMounted, ref } from 'vue';

const playerRef = ref();

function play() {
  playerRef.value.getDotLottieInstance().play();
}
</script>

<template>
  <DotLottieVue
    ref="playerRef"  
    style="height: 500px; width: 500px"
    src="https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie"
  />
  <button @click="play">Play</button>
</template>