Set explicit key for v-for

This commit is contained in:
Phan An 2017-10-02 01:38:30 +01:00
parent a06573c116
commit c22a93d23f
5 changed files with 14 additions and 8 deletions

View file

@ -6,7 +6,7 @@
</h1>
<div ref="scroller" class="albums main-scroll-wrap" :class="`as-${viewMode}`" @scroll="scrolling">
<album-item v-for="item in displayedItems" :album="item"/>
<album-item v-for="item in displayedItems" :album="item" :key="item.id"/>
<span class="item filler" v-for="n in 6"/>
<to-top-button/>
</div>

View file

@ -6,7 +6,7 @@
</h1>
<div class="artists main-scroll-wrap" :class="`as-${viewMode}`" @scroll="scrolling">
<artist-item v-for="item in displayedItems" :artist="item"/>
<artist-item v-for="item in displayedItems" :artist="item" :key="item.id"/>
<span class="item filler" v-for="n in 6"/>
<to-top-button/>
</div>

View file

@ -13,6 +13,7 @@
<li v-for="song in top.songs"
:top-play-count="top.songs.length ? top.songs[0].playCount : 0"
:song="song"
:key="song.id"
is="song-item"/>
</ol>
</section>
@ -24,6 +25,7 @@
<li v-for="song in recentSongs"
:top-play-count="top.songs.length ? top.songs[0].playCount : 0"
:song="song"
:key="song.id"
is="song-item"/>
</ol>
@ -39,12 +41,12 @@
<div class="two-cols">
<div class="wrapper as-list">
<album-item v-for="album in recentlyAdded.albums" :album="album"/>
<album-item v-for="album in recentlyAdded.albums" :album="album" :key="album.id"/>
<span class="item filler" v-for="n in 3"/>
</div>
<div>
<ul class="recently-added-song-list" v-show="recentlyAdded.songs.length">
<li v-for="song in recentlyAdded.songs" :song="song" is="song-item"/>
<li v-for="song in recentlyAdded.songs" :song="song" :key="song.id" is="song-item"/>
</ul>
</div>
</div>
@ -54,7 +56,7 @@
<h1>Top Artists</h1>
<div class="wrapper" :class="`as-${preferences.artistsViewMode}`">
<artist-item v-for="artist in top.artists" :artist="artist"/>
<artist-item v-for="artist in top.artists" :artist="artist" :key="artist.id"/>
<span class="item filler" v-for="n in 3"/>
</div>
</section>
@ -63,7 +65,7 @@
<h1>Top Albums</h1>
<div class="wrapper">
<album-item v-for="album in top.albums" :album="album"/>
<album-item v-for="album in top.albums" :album="album" :key="album.id"/>
<span class="item filler" v-for="n in 3"/>
</div>
</section>

View file

@ -15,7 +15,7 @@
<div class="main-scroll-wrap">
<div class="users">
<user-item v-for="user in state.users" :user="user" @editUser="editUser"/>
<user-item v-for="user in state.users" :user="user" @editUser="editUser" :key="user.id"/>
<article class="user-item" v-for="n in 6"/>
</div>
</div>

View file

@ -16,7 +16,11 @@
<ul class="menu">
<playlist-item type="favorites" :playlist="{ name: 'Favorites', songs: favoriteState.songs }"/>
<playlist-item v-for="playlist in playlistState.playlists" type="playlist" :playlist="playlist"/>
<playlist-item
v-for="playlist in playlistState.playlists"
type="playlist"
:playlist="playlist"
:key="playlist.id"/>
</ul>
</section>
</template>