vue.js 如何将数组中的对象替换为另一个对象？

iqih9akk 于 2023-03-09 发布在 Vue.js

关注(0)|答案(2)|浏览(671)

在vue.js中，我正在寻找一种方法，将数组中的social替换为具有相同值的另一个对象的键，例如：

netTeams: {
            0: {
                social: 'Twitter',
                name: 'Red',
                id: 32,
                group: 'a'
            },
            1: {
                social: 'Twitter',
                name: 'Green',
                id: 33,
                group: 'b'
            }
        }

以及

socials: {
            1: Facebook,
            2: Instagram,
            3: Twitter,
            4: Youtube
        }

结果应该是

netTeams: {
        0: {
            social: 3,
            name: 'Red',
            id: 32,
            group: 'a'
        },
        1: {
            social: 3,
            name: 'Green',
            id: 33,
            group: 'b'
        }
    }

我尝试了一个计算属性，但我得到错误。任何建议将不胜感激！

vue.js

来源：https://stackoverflow.com/questions/75670514/how-to-replace-an-object-in-an-array-with-another-object

2条答案

按热度按时间

2eafrhcq1#

首先，这与Vuejs无关，而是一个纯粹的javascript问题。
要完成您需要的工作，您必须：
1.迭代您的团队以找到每个团队的设置值
1.通过比较团队名称和社交数组值来查找正确的值（通过索引查找或获取对象键）
1.返回团队的副本，其中包含您找到的新“社交”值
1.将所有内容都 Package 在计算属性中，以便在netTeams更改时能够做出React。
请参见下面的代码段以获取完整的代码。
如前所述，如果可以将基于索引的对象转换为实际数组（即['Facebook', 'Twitter']而不是{0: 'Facebook', 1: 'Twitter'}），代码会更简单。

<html>
<div id="app">
  <pre>{{ socialsWithIndex }}</pre>
</div>

<!-- Don't forget to include Vue from CDN! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        socials: {
          1: 'Facebook',
          2: 'Twitter',
          3: 'LinkedIn',
        },
        netTeams: {
            0: {
                social: 'Twitter',
                name: 'Red',
                id: 32,
                group: 'a'
            },
            1: {
                social: 'Twitter',
                name: 'Green',
                id: 33,
                group: 'b'
            },
            2: {
                social: 'Facebook',
                name: 'Blue',
                id: 34,
                group: 'c'
            }
        }
      }
    },
    computed: {
      socialsWithIndex() {
        // Transform each team (had to convert to an array)
        return Object.values(this.netTeams).map(team => {
          // Find the socials index from the value. Split into entries to get both key + value
          const [correspondingSocialIndex,] = Object.entries(this.socials).find(([socialIndex, socialName]) => socialName === team.social)

          /* This could work too, if your object keys are always indexes
           * const correspondingSocialIndex = Object.values(this.socials).findIndex(socialName => socialName === team.social)
           */

          // Return a copy of the team, with just the "social" key with the new value
          return {
            ...team,
            social: parseInt(correspondingSocialIndex, 10) // Convert the string key to number
          }
        })
      }
    },
  });
</script>
</html>

赞(0）回复(0）举报 2023-03-09

2wnc66cl2#

试着运行这个

const netTeams = {
    0: {
        social: 'Twitter',
        name: 'Red',
        id: 32,
        group: 'a'
    },
    1: {
        social: 'Twitter',
        name: 'Green',
        id: 33,
        group: 'b'
    }
};

const socials = {
            1: 'Facebook',
            2: 'Instagram',
            3: 'Twitter',
            4: 'Youtube',
        };
const reversedSocials = Object.keys(socials).reduce((acc, key) => {
   acc[socials[key]] = Number(key)
   return acc
}, {});
console.log(reversedSocials);

const updated = {}
for ([key, value] of Object.entries(netTeams)) {
   console.log(key)
   updated[key] = {
       ...value,
       social: reversedSocials[value.social],
   }
}

console.log(updated)

赞(0）回复(0）举报 2023-03-09

我来回答

vue.js 如何将数组中的对象替换为另一个对象？

2条答案

相关问题

热门标签

最新问答