如何从Vue项目接口返回的MongoDB查询对象中提取指定属性值

• 核心原因1：后端/galerija接口执行find()+toArray()操作，返回的是galerija集合的全部文档数组，不是单个文档对象。你在Service层直接对数组取data.naslov这类不存在的属性，自然返回undefined。
• 核心原因2：dohvati_objavu是async异步函数，默认返回Promise对象，Vue侧直接赋值的话拿到的是Promise而非实际业务数据，也会导致无法提取属性。

步骤1：调整Service层逻辑适配数组返回值 #

如果你的业务需要获取全量图库列表，遍历数组映射你需要的字段即可：

let Objave = {
    async dohvati_objavu() {
        let response = await Service.get(/galerija)
        let data = response.data;
        // 遍历数组，将每一项转为需要的结构
        return data.map(item => ({
            id: item._id,
            email: item.email,
            naslov: item.naslov,
            noviOpisSlike: item.noviOpisSlike,
            slika: item.slikaReference,
        }))
    },
}

如果只需要获取单条文档，可以在请求时传入文档ID，后端接口改为用findOne查询单条数据返回即可。

步骤2：Vue侧调用异步函数添加await处理 #

将调用方法也改为async异步函数，等待请求返回结果后再赋值：

async dohvatiObjavu(){
    // 加await等待异步请求执行完成
    this.objava = await Objave.dohvati_objavu();
    // 现在this.objava是处理后的数组，取单条属性可以用下标访问，例如 this.objava[0].email
    console.log("Current post ", this.objava);
}

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