NUXT JS 在 Array 中插入 Array 并显示 forEach答案

【问题标题】：NUXT JS insert Array inside Array and display forEachNUXT JS 在 Array 中插入 Array 并显示 forEach
【发布时间】：2022-01-18 00:52:56
【问题描述】：

大家下午好！

自从 3 天以来我一直在论坛和这里搜索答案，我无法解决它。也许你可以帮助解决这个问题：

在 javascript 中更容易，但在 NUXT 中，我们无法在不需要的地方插入 Javascript..

在组件页面中：

<script>
    import axios from 'axios';

  export default {
 
    data() {
      return {
       players: [],
    };
    },



    created() {
      let instance =this;


      for (let i=1; i <= 21; i++) {
        axios
          .get(`https://api.test/player/${i}`)
          .then((response) => {
            let player= {
              name: response.data.name,
              url: response.data.url,
              
            };
            
              instance.players.push(player);
          })
          .catch((err) => {
            console.log(err);
          });
      }
  },



};
</script>

这个网址是一个测试。但是它返回了一个关于玩家1技能的数组。我已经显示了这个玩家的技能。

但我需要显示 forEach 球员，他们的技能（40 名球员）。

编辑： 感谢您的 cmets。但是现在它以错误的顺序填充了数组，我不知道将异步等待放在哪里？我想是这个错误

【问题讨论】：

NuxtJS 只是一个建立在 JS 之上的框架。它仍然是 100% JavaScript，应该没有区别。当前代码的问题很可能是某处缺少async/await 关键字。很可能您的阵列中需要Promises.all()。看看这个教程，看看事情是否清楚：javascripttutorial.net/es6/javascript-promise-all
那么，Nadav 的记录是正确的吗？ --- async fetch() { await this.fillArray(); }, ---

标签： javascript vue.js vue-component nuxt.js

【解决方案1】：

注意 forEach 不支持异步方法，你必须使用常规的 for 或 while

data() {
    return {
      ArraySkills: [],
    };
  },
  async fetch() {
    await this.fillArray();
  },
  methods: {
    async fillArray() {
      let id = 1;
      while (id < 41) {
        id++;
        const response = await fetch(`https://api.test/player/${id}`);
        const ArraySkill = response.json();
        this.ArraySkills.push(ArraySkill);
      }
    },
  },

【讨论】：

谢谢纳达夫