Vue.js中限制getCodeLinkage2方法仅请求前10条数据

修改后的完整代码 #

JavaScript部分

new Vue({
  el: "#app",
  data: {
    box: [],
    Modules: []
  },
  mounted: function() {
    // 修正：调用组件方法需加this前缀
    this.getCodeLinkage2();
  },
  methods: {
    async getCodeLinkage2() {
      // 关键：用slice(0,10)截取前10条数据发起请求
      const data = await Promise.all(
        this.Modules.slice(0, 10).map(module => 
          this.request('GET', `https://example.com/${module.Identifier}/content/voc`)
        )
      );
     
      data.forEach(item => {
        alert("data");
        this.box.push(item);
      });
      console.log(this.box);
    }
  }
})

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="mod in Modules">
      {{ mod.Code}}<br>
      {{ mod.Identifier}}
    </li>
  </ul>
</div>

核心修改说明 #

• 限制请求数量：通过this.Modules.slice(0, 10)截取数组的前10个元素，仅对这部分元素发起异步请求，避免遍历全部数据。如果Modules的长度不足10，slice会自动返回全部现有元素，无需额外判断。
• 修正方法调用错误：mounted钩子中调用组件内部方法必须添加this前缀，否则会因作用域问题找不到getCodeLinkage2方法。

内容的提问来源于stack exchange，提问作者Vzupo