Wie VueJS verwendet, um ein Element in einer Liste hervorzuheben

Question

Ich bin ziemlich neu in VueJS und ich versuche, es zu verwenden, um eine Wiedergabeliste App zu machen. Der erste Teil Playlist zu machen war ziemlich einfach:

var playlist = []; 
var playlistCurrentlyPlaying = 0; 

// TODO: Highlight currently playing song 
Vue.component('playlist-item', { 
    template: "<li class='playlist-item'>{{ text }}</li>", 
    props: ['text'] 
}); 

var playlistElement = new Vue({ 
    el: '#playlist', 
    data: { 
     playlist: playlist 
    } 
}); 

// Add song to the playlist 
playlist.push({filepath:"url/to/file", artist:"The Band"}) 

und die entsprechenden HTML:

<ul id="playlist" > 
    <li v-for="song in playlist" is="playlist-item" :text="song.filepath"> 
    </li> 
</ul> 

Die playlistCurrentlyPlaying Variable durch andere Funktionen verwendet wird, den Überblick über welches Lied in der Playlist zu halten verwendet werden . Ich möchte mit Vue auch den aktuell wiedergegebenen Song in der Playliste hervorheben. Ich benutze Vue2 und kann einfach nicht herausfinden, wie man das macht

Answer 1

Ich bin neu in Vue.JS selbst, aber könntest du keine weitere Eigenschaft zu deiner Playlist-Item-Komponente hinzufügen, die anzeigt, ob dieser Gegenstand gerade spielt (aktiv)?

<li v-for="(song, index) in playlist" is="playlist-item" :text="song.filepath" :active="index == playlistCurrentlyPlaying">