VueJs中添加元素后数组仍为空，无法访问数据问题求助

云上老周

2026-8-21

问题分析

你遇到的核心问题是异步执行顺序：forEach 循环中的 async 回调函数是异步执行的，当你调用 console.log(items) 时，所有API请求还未完成，此时 items 数组是空的。浏览器控制台会实时更新数组的显示内容，所以你能看到后续填充的元素，但在代码执行到 console.log 的那一刻，数组确实没有元素，自然无法访问。

解决方案

要解决这个问题，需要等待所有异步请求完成后再处理数组，具体步骤如下：

将 forEach 替换为 map，让每个迭代返回一个Promise，收集所有Promise到数组中
使用 Promise.all() 等待所有Promise完成，再处理结果
将 getPaymentsLinkItems 改为异步函数，并在 created 钩子中 await 它

修改后的代码如下：

修改 `getPaymentsLinkItems` 函数

async getPaymentsLinkItems() {
    // 用map生成Promise数组
    const promiseArray = this.paymentLinks.map(async (link) => {
        const response = await this.stripe.get(`/payment_links/${link.id}/line_items`);
        return { [response.data.data[0].price.product]: link.url };
    });

    // 等待所有请求完成，得到填充后的数组
    const items = await Promise.all(promiseArray);
    console.log(items);
    // 这里可以继续处理items，比如赋值给组件数据
    // this.linkItems = items;
}

修改 `created` 钩子

async created() {
    this.stripe = this.$http.create({
        baseURL:  process.env.VUE_APP_STRIPE_URL,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': `Bearer ${process.env.VUE_APP_STRIPE_TOKEN}`
        }
    });
    await this.getStripeProducts();
    await this.getPaymentsLinks();
    // 等待getPaymentsLinkItems完成
    await this.getPaymentsLinkItems();
}

补充说明