Vue-3排序列表A-Z的v-for在v-for

Question

我试图按字母顺序(即A)对以下v-for列表进行排序。我知道下面的计算属性方法用于按字母顺序排序v-for列表；

sortedList() {
            const res = []
            this.itemtwo.song.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
            })
        }

但是，我需要在v-for上完成v-for中的操作，因为我需要第一个用于vue-router的v-for中的数据。如果使用上述计算属性，则无法从数据结构层次结构的高层访问相应的数据；

这是我的数据结构；

export const datatwo = [
{id: "1", artist: "Yaakov Shwekey", dateadded: "07/04/2022", artistroute: "/yaakovshwekey", 
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"}
            ]}, ]},   ]
},]

这是我现在的v-for；

        <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 v-if="albumname == item.album" class="routerlink" :key="item.songsinalbum" :to="'/albumselected/' + item.album + '/artist/' + album.artist">
                            <div class="routerlink button">{{itemtwo.song}}</div>
                        </router-link>
                    </div>
                </div>
            </div>

不确定这是否可能，真的很感激帮助。谢谢。

Answer 1

理论上可以用

<div
        class=""
        v-for="(itemtwo, i) in item.songsinalbum.sort((a, b) =>
          a.song > b.song ? 1 : -1
        )"
        :key="i"
      >
        <router-link
          class="routerlink"
          :key="item.songsinalbum"
          :to="'/albumselected/' + item.album + '/artist/' + album.artist"
        >
          <div class="routerlink button">{{ itemtwo.song }}</div>
        </router-link>
      </div>

直接在模板中。或者将排序函数提取到如下方法中: Template：

<div
        class=""
        v-for="(itemtwo, i) in sortFunction(item.songsinalbum)"
        :key="i"
      >

脚本(为了安全起见，我会在这里使用打字本)：

const sortFunction = (arr) => {
      return arr.sort((a, b) => {
        if (a.song > b.song) return 1;
        else return -1;
      });
    };

最后，也许最好的方法是模仿v，因为您正在寻找计算方法，就像您尝试的那样。计算缓存，因此只有当输入发生变化时，它才会改变。我不太确定使用常规方法解决方案的频率会有多大。我想出了一个使用计算函数的解决方案：

您需要创建几个包装组件来向下钻取所需的正确项，即歌曲。我为每一步创建了一个包装器组件。这可能不是最好的解决方案，但在每种情况下，我都想不出更好的解决方案--您需要每个数组的上下文才能正确排序。我相信这个解决方案可能是最有表现力的，但不是优雅的。我提交了这个沙箱，而不是在堆栈溢出上显示每个包装。在每个https://codesandbox.io/s/quirky-cartwright-wfo1ot中，您可以看到我深入到每个自己的上下文中。你可以用你认为合适的方式来设计，但在它的结尾，每一张专辑的专辑都将正确地按字母顺序排列歌曲。但是，即使这个解决方案也可能通过简单地在模板中排序，我宁愿清理排序函数并在模板中使用它，如果这个过程太长的话。