按字母順序對v-for串列進行排序

我有一個v-for呈現以下資料的；

export const data = [
{id: "1", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "3", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'c' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]

串列顯示“歌曲”中的所有“歌曲”。我希望這個顯示為 az。

這是如何在 Vue-3 中完成的？

我知道它是使用計算屬性完成的，但不知道從哪里開始！

這是我當前的代碼；

 <div v-for="album in songim" :key="album.id">
    <div class="button" v-for="(item, i) in album.songs" :key="i">
      {{ item.song }}
    </div>
  </div>

謝謝

uj5u.com熱心網友回復：

如果要按歌曲對所有歌曲進行排序：

const app = Vue.createApp({
  data() {
    return {
      albums: [
{id: "1", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "3", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 's' }, { song : 'c' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'a' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]
    }
  },
  computed: {
    sortedSongs() {
      const res =[]
      this.albums.forEach(a => a.songs.forEach(s => res.push(s)))
      return res.sort(function(a, b) {
        if(a.song < b.song) { return -1; }
        if(a.song > b.song) { return 1; }
        return 0;
      })
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
    <div class="button" v-for="(item, i) in sortedSongs" :key="i">
      {{ item.song }}
    </div>
</div>

標籤：Vue.js Vuejs3

上一篇：如何使用For回圈在GoogleApps腳本中的作業表索引號上回圈制表符？

下一篇：v-for與子物件