CODEWITHSUNDEEP
javascripthtmlaudiovue.js
rafaelleru
rafaelleru

Reputation: 357

declare onended event in a child of vuejs template

In my template of a custom music player I have a html5 tag child, is what play music, and I want to request next song after end, I think that put all the onended event inside the templete isn't a good practice and I want how to make this correctly.

Here it is the template:

<template>
<footer id="player" class="player">
<progress min="0" max="1" value="0" ref="progress"></progress>
<div class="div-player">
  <i class="material-icons play-button player-button" >skip_previous</i>
  <i class="material-icons play-button player-button" v-on:click="togglePause">play_circle_outline</i>
  <i class="material-icons play-button player-button" >skip_next</i>
  <audio ref="audioTag" :src="source" autoplay preload="none" @timeupdate="onTimeUpdateListener"></audio>
  <a class=".primary-text-color" style="text-align: center; font-size: small;">{{ title }}</a>
</div>
<!-- <progress min="0" max="1" value="0" ref="progress"></progress> -->
</footer>
</template>

I started by putting the listener into the component logic but didn't work. Any help with this??

Upvotes: 1

Views: 1328

Answers (1)

rafaelleru
rafaelleru

Reputation: 357

the best way is define v-on:ended="custom-event" and manage it in the methods part of the component logic.

Upvotes: 2

Related Questions