Vue新手求助：如何映射两个API数组并合并指定字段到userData？

原代码存在的几个问题： #

• 异步加载顺序问题：mounted里直接调用三个方法，但loadUsers和loadPictures是异步函数，mapPicture会在数据还没加载完成时就执行，导致拿不到数据。
• 数组取值错误：mapPicture里写成了this.user.name[i]，实际应该是this.users[i].name（users是数组，每个元素是包含name/username的对象）。
• 未正确赋值给Vue实例属性：userData = ...没有加this，无法更新Vue实例的userData数据。
• 冗余操作：photos先赋值整个数组再slice，可以合并成一步。

修正后的完整代码 #

const app = Vue.createApp({
    data() {
        return {
            users: [],
            photos: [],
            userData: []
        }
    },
    methods: {
        async loadUsers() {
            const res = await fetch("https://jsonplaceholder.typicode.com/users");
            const finalRes = await res.json();
            this.users = finalRes;
        },
        async loadPictures() {
            const res = await fetch("https://jsonplaceholder.typicode.com/photos");
            const finalRes = await res.json();
            // 直接截取前10条数据
            this.photos = finalRes.slice(0, 10);
        },
        mapPicture() {
            // 确保users和photos都有数据再映射
            if (!this.users.length || !this.photos.length) return;
            
            // 正确映射属性，赋值给this.userData
            this.userData = this.photos.map((photo, index) => {
                const user = this.users[index];
                return {
                    profilePic: photo.url, // 取photos的url属性
                    name: user?.name || '', // 可选链避免索引越界报错
                    username: user?.username || ''
                }
            });
            console.log("映射结果：", this.userData);
        }
    },
    async mounted() {
        // 等待两个异步请求都完成后再执行映射
        await Promise.all([this.loadUsers(), this.loadPictures()]);
        this.mapPicture();
    },
    computed: {
        GetUsers() {
            return this.users;
        },
        GetPictures() {
            return this.photos;
        }
    }
}).mount('#app')

关键说明： #

1. 异步顺序控制：mounted改成async，用Promise.all等待两个接口请求都完成，再调用mapPicture，保证数据已加载。
2. 正确取值：通过this.users[index]拿到对应位置的用户对象，再取name和username；用可选链user?.name防止如果用户数组长度小于照片数组时报错。
3. 更新Vue数据：用this.userData赋值，确保数据响应式更新。
4. 简化photos处理：直接在赋值时截取前10条，减少冗余操作。

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