Spotifyトラッククローン

Question

私はWeb Spotifyを複製しようとしています。私のプロジェクトはGithubです。私が使ってきたフレームワークはVue.jsです。

今、私はthis pageをクローンしようとしています。ユーザーがトラックをクリックすると、プレイリストの対応するトラックが再生されます。今度は、トラックごとにオブジェクトを取得できます。preview urlがあります。 "preview_url" : "https://p.scdn.co/mp3-preview/4839b070015ab7d6de9fec1756e1f3096d908fba",と私は音楽のプレビューを再生するためにオーディオタグを使用することができます。

問題は、対応する再生ボタンをクリックしたときに特定のトラックを再生する方法がわかりません。

<track-display v-for="track in tracks" :track-title="TITLE" :artist="artist" :album="ALBUM"></track-display> 

track-displayがどのように見えるれ、トラックタイトル、アーティスト、アルバムが含まれていると仮定され、私が作成したコンポーネントです：今

、私はすべてのトラックのオブジェクトを格納する配列tracksを持っています。クリックしたトラック要素を検出して対応するトラックを再生するにはどうしたらいいですか？

Answer 1

Vue.js Custom eventを使用する必要があります。また、追加の引数trackNumを受け入れる必要があるため、親がクリックされたトラックを知ることができます。次のコードのようなものに変更する必要があります。

<track-display v-for="(track, index) in tracks" :track-title="TITLE" :artist="artist" :album="ALBUM" :trackNum="index"></track-display> 

そして、あなたは、イベントを発するときのようなものが必要になります。

methods: { 
    togglePlayState() { this.$emit('togglePlay', trackNum); }, 
} 

あなたが親にイベントをキャッチし、対応するpreview-urlを再生する必要があります。 tracks配列ではtrackNumはtracksの位置に対応しているためです。