私はHTML5のタグの子を持つカスタムの音楽プレーヤーの私のテンプレートでvuejsテンプレート

Question

の子でonendedイベントを宣言し、音楽を再生し、私は終了後の次の曲をリクエストしたいものですが、私はそれがすべてonendedイベントを置くと思いますテンプルテの内部は良い習慣ではありません。私はこれを正しくする方法が欲しいです。

ここでは、テンプレートです：

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

私はコンポーネントのロジックにリスナーを置くことによって始めたが、うまくいきませんでした。これはどんな助け？

Answer 1

最良の方法は、v-on:ended="custom-event"を定義し、コンポーネントのロジックの方法の一部でそれを管理しています。