VueJS를 사용하여 목록의 항목을 강조 표시하는 방법

Question

저는 VueJS에 새로 왔으며 재생 목록 응용 프로그램을 만드는 데 사용하려고합니다.

이

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"}) 

그리고 해당 HTML :

playlistCurrentlyPlaying 변수가 재생 목록에있는 노래가 무엇을 추적하기 위해 다른 기능에 의해 사용되는

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

사용되고있는 재생 목록을 만드는 첫 번째 부분은 아주 간단했다 . Vue를 사용하여 현재 재생 목록의 노래를 강조 표시하고 싶습니다. 내가 Vue2를 사용하고 있는데 어떻게해야할지 모르겠다.

Answer 1

나는 Vue.JS를 처음 사용하고 있지만, 현재 재생중인 항목인지 여부를 나타내는 playlist-item 구성 요소를 추가 할 수는 없다. 유효한)?

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