如何在 v-for 中定位对象中的对象

Question

我有一个列表，其中显示了所有艺术家的所有歌曲。

我可以通过在 v-for 中加入 v-for 来做到这一点。

但是，我需要列表来显示 a-z，我可以在一个 v-for 上用我计算的属性来做到这一点，但是当我添加 v-for 时它似乎不起作用v-for 的？

看看我的尝试?

我怎样才能让它工作？

请参阅下面我的数据结构！

这是我的代码试试；

<template>
  <div class="SongView">

<!-- Dynamic Headers -->
        <h1>{{header}}</h1>
        <br>
        <h2>{{header2}}</h2>  

<!-- Search Componenet -->
        <div class="mx-5 mb-3 form-group">
              <br>
              <input class="mb-5 form-control" placeholder="Search Albums Here..." v-model="searchQuery"/>
        </div>

  <!-- This is my working list - Dynamic Song Route Button -->
            <div class="row button-container-all mx-5 pb-5">
                <div v-for="album in datanew" :key="album.id">
                    <div class="" v-for="(item, i) in album.albums" :key="i">
                        <div class="" v-for="(itemtwo, i) in item.songsinalbum" :key="i">
                            <router-link class="routerlink" :key="item.songsinalbum" :to="'/songselected/' + item.song + '/artist/' + album.artist">
                                <div class="routerlink button">{{itemtwo.song}}</div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div> 


<!--This is my test-->
            <div class="test button-container-all">
            <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"}
            ]}, ]},   ]
},

谢谢！

Answer 1

这里的问题来自您尝试推送的计算值。下面一行行不通，因为 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>

如何在 v-for 中定位对象中的对象

How to Target Object in Object in v-for

vue.js

vuejs3

编辑

工作片段