用于在单独的div中呈现每个对象的子对象--防止.sort。

Question

我在vue-3中遇到了下面的vue-3；

在我解释之前，这是我的数据结构/层次结构；

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"}
            ]}, ]},   ]
},
{id: "2", artist: "Baruch Levine", dateadded: "07/04/2022", artistroute: "/baruchlevine", 
albums: [
    {album : 'Vezkani', songsinalbum: [
        { song : 'Vezakani', keys: [
            {key: "Am"},
            {key: "Em"}
        ]}, 
        { song : 'Bitchu', keys: [
            {key: "Am"},
            {key: "Em"}
        ]},  
        { song : 'Vhu', keys: [
            {key: "Am"},
            {key: "Em"}
        ]}, ]},   

        {album : 'Touched by a Niggun', songsinalbum: [
            { song : 'Faultche Phony Rebbe', keys: [
                {key: "Am"},
                {key: "Em"}
            ]}, 
            { song : 'Tour of Yerushalayim', keys: [
                {key: "Am"},
                {key: "Em"}
            ]},  
            { song : 'Someones Child', keys: [
                {key: "Am"},
                {key: "Em"}
            ]}, ]},   ]
},
{id: "3", artist: "Simcha Leiner", dateadded: "10/04/2022", artistroute: "/simchaleiner", 
albums: [
    {album : 'Simcha Leiner One', songsinalbum: [
        { song : 'Mi Mi Mi', keys: [
            {key: "Am"},
            {key: "Em"}
        ]}, 
        { song : 'Veal Hakol', keys: [
            {key: "Am"},
            {key: "Em"}
        ]},  
        { song : 'Shalom', keys: [
            {key: "Am"},
            {key: "Em"}
        ]}, ]},   

        {album : 'Simcha Leiner Two', songsinalbum: [
            { song : 'Mi Adir', keys: [
                {key: "Am"},
                {key: "Em"}
            ]}, 
            { song : 'Boi Kallah', keys: [
                {key: "Am"},
                {key: "Em"}
            ]},  
            ]},   ]
}
]

现在，我想要做的是在没有使用album的情况下，将所有的computed property名称显示在一个字母列表中，而只是在v-for中创建一个v-for。之所以出现这种情况，是因为我需要访问router的router名称。这就是我创建的v-for循环(将排序函数附加到第二个循环中(尽管我知道这对性能不是最好的！)；

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

但是，排序不能正常工作，因为vue呈现子对象的方式是为每个父类创建单独的div，而.sort函数自然不能工作。这就是Vue如何呈现上面的v-for；

        <div class=""><a href="/albumselected/Shomati/artist/Yaakov Shwekey" class="routerlink">
                <div class="routerlink button">Shomati</div>
            </a></div>
        <div class=""><a href="/albumselected/Simcha/artist/Yaakov Shwekey" class="routerlink">
                <div class="routerlink button">Simcha</div>
            </a></div>
    </div>
    <div>
        <div class=""><a href="/albumselected/Touched by a Niggun/artist/Baruch Levine" class="routerlink">
                <div class="routerlink button">Touched by a Niggun</div>
            </a></div>
        <div class=""><a href="/albumselected/Vezkani/artist/Baruch Levine" class="routerlink">
                <div class="routerlink button">Vezkani</div>
            </a></div>
    </div>
    <div>
        <div class=""><a href="/albumselected/Simcha Leiner One/artist/Simcha Leiner" class="routerlink">
                <div class="routerlink button">Simcha Leiner One</div>
            </a></div>
        <div class=""><a href="/albumselected/Simcha Leiner Two/artist/Simcha Leiner" class="routerlink">
                <div class="routerlink button">Simcha Leiner Two</div>
            </a></div>
    </div>

我一直使用的计算属性是；

sortedSongs() {
        const res = []
        this.datanew.forEach(data => {
            data.albums.forEach(album => {
                res.push(album)
            })
        })


        return res.sort((a, b) => {
            if (a.album > b.album) return 1
            else return -1
        })
    },

开放源码社区中有谁有解决这个问题的方法吗？非常感谢您的帮助或验证！

Answer 1

在模板中调用sort是错误的，因为它会变异数组，更不用说每次呈现时都会调用它。

它可以是与计算中的原始datatwo相同的结构，但使用排序的数据：

sortedData() {
  return datatwo.map(item => ({
    ...item,
    albums: [...item.albums].sort((a, b) => { /* ... */ })
  }))
}

或者将albums作为一个列表进行排序和使用：

sortedData() {
  return this.datanew.flatMap(item => item.albums.map(album => ({
    ...item,
    ...album
  })))
  .sort((a, b) => {
    if (a.album > b.album) return 1;
    else if (a.album < b.album) return -1;
    else return 0;
  });
}

并以同样的方式使用，但模板中没有sort。

应在数组副本上调用sort，以避免发生突变。