我有一個串列，顯示所有藝術家的所有歌曲。
我可以通過在 v-for 中使用 v-for 來做到這一點。
但是，我需要串列來顯示 az，我可以在一個 v-for 上使用我的計算屬性來做到這一點，但是當我在 v-for's 中添加 v-for's 時它似乎不起作用？
看看我的嘗試<!--This is my Test-->？
我怎樣才能讓它作業？
請參閱下面的我的資料結構！
這是我的代碼嘗試；
<template>
<div >
<!-- Dynamic Headers -->
<h1>{{header}}</h1>
<br>
<h2>{{header2}}</h2>
<!-- Search Componenet -->
<div >
<br>
<input placeholder="Search Albums Here..." v-model="searchQuery"/>
</div>
<!-- This is my working list - Dynamic Song Route Button -->
<div >
<div v-for="album in datanew" :key="album.id">
<div v-for="(item, i) in album.albums" :key="i">
<div v-for="(itemtwo, i) in item.songsinalbum" :key="i">
<router-link :key="item.songsinalbum" :to="'/songselected/' item.song '/artist/' album.artist">
<div >{{itemtwo.song}}</div>
</router-link>
</div>
</div>
</div>
</div>
<!--This is my test-->
<div >
<div v-for="itemss in sortedSongs" :key="itemss.id">
{{ itemss.album }}
</div>
</div>
</div>
</template>
<script>
import {datatwo} from '@/data2'
export default {
data() {
return {
datanew: datatwo,
header:"Browse by Song" ,
header2: "Select a Song:",
}
},
computed: {
sortedSongs() {
const res =[]
this.datanew.albums.item.songsinalbum.forEach(a => a.album.forEach(s => res.push(s)))
return res.sort(function(a, b) {
if(a.album < b.album) { return -1; }
if(a.album > b.album) { return 1; }
return 0;
})
}
}
}
</script>
這是我的資料結構；
export const datatwo = [
{id: "1", artist: "aaxx", dateadded: "07/04/2022", artistroute: "/axxx",
albums: [{album:'Shomati', songsinalbum: [
{ song : 'MaMaMa', keys: [
{key: "Am"},
{key: "Em"}
]},
{ song : 'Al Naharos Bavel', keys: [
{key: "Am"},
{key: "Em"}
]},
{ song : 'Levinyomin', keys: [
{key: "Am"},
{key: "Em"}
]}, ]},
{album : 'Simcha', songsinalbum: [
{ song : 'Kolot', keys: [
{key: "Am"},
{key: "Em"}
]},
{ song : 'Kalu Kol Hakotzim', keys: [
{key: "Am"},
{key: "Em"}
]},
{ song : 'Vehi Sheamdah', keys: [
{key: "Am"},
{key: "Em"}
]}, ]}, ]
},
謝謝！
uj5u.com熱心網友回復：
這里的問題來自您嘗試推送的計算值。以下行不起作用，因為this.datanew.albums.item未定義（因為this.datanew.albums是陣列）
this.datanew.albums.item.songsinalbum.forEach(a => a.album.forEach(s => res.push(s)))
return res.sort(function(a, b) {
要對資料進行排序，我要做的是遍歷專輯，然后將其推入res陣列，歌曲串列已排序。
sortedAlbums() {
const res = []
this.datatwo.forEach(data => {
data.albums.forEach(album => {
album.songsinalbum.sort((a,b) => {
if(a.song > b.song) return 1
else return -1
})
console.log(album)
res.push(album)
})
})
return res
}
編輯
如果您只想要排序后的歌曲，我建議您將所有的歌曲放入一個陣列中，然后對整個陣列進行排序。
這不是最有效的方法，因為您可以直接插入到好的位置，但這是最簡單的方法。
sortedSong() {
const res = []
this.datatwo.forEach(data => {
data.albums.forEach(album => {
album.songsinalbum.forEach((song) => {
res.push(song)
})
})
})
return res.sort((a, b) => {
if(a.song > b.song) return 1
else return -1
})
}
作業片段
new Vue({
el: '#app',
computed: {
sortedSong() {
const res = []
this.datatwo.forEach(data => {
data.albums.forEach(album => {
album.songsinalbum.forEach((song) => {
res.push(song)
})
})
})
return res.sort((a, b) => {
if(a.song > b.song) return 1
else return -1
})
}
},
data: () => {
return {
datatwo: [{
id: "1",
artist: "aaxx",
dateadded: "07/04/2022",
artistroute: "/axxx",
albums: [{
album: 'Shomati',
songsinalbum: [{
song: 'MaMaMa',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
{
song: 'Al Naharos Bavel',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
{
song: 'Levinyomin',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
]
},
{
album: 'Simcha',
songsinalbum: [{
song: 'Kolot',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
{
song: 'Kalu Kol Hakotzim',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
{
song: 'Vehi Sheamdah',
keys: [{
key: "Am"
},
{
key: "Em"
}
]
},
]
},
]
}]
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="song of sortedSong">
Song : {{ song.song }}
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461778.html