Question

我使用NodeJS和Express + MongoDB创建了一个简单的全栈Web应用程序，以构建后端API和用于前端的Vue.JS。

所有的Write Read和Delete API均运行良好（我使用Postman对其进行了测试）。一切都在前端上运行良好，除非我尝试对对象数组进行迭代（v-for）以获取_id，但这是行不通的。

称为posts的数组具有'text'和'createdAt'的属性。 v-for可以完美运行并按预期输出2个属性。但是，我尝试输出_id（来自MongoDB的默认ID），但返回“未定义”。

这引起了一个问题，因为如果我无法获得_id，我将无法使用现有的后端删除API删除特定帖子。

据我了解，在后端，_id必须先转换为ObjectId才能用于数据库查询。但是在前端（vue）上，我不确定如何将_id转换为ObjectId。我在这里朝正确的方向前进吗？

 <div class="post" v-for="(post,i) in posts " :key="post._id" :index="i" :item="post" @dblclick="deletePost(post._id)">
        {{post.createdAt.getDate()}}/{{post.createdAt.getMonth() + 1}}/{{post.createdAt.getFullYear()}}
        <p class="text">{{post.text}}</p>
      </div>
...

methods: {
    async deletePost(id){
      console.log(id) //this returns undefined
      await PostService.deletePost(id);
      this.posts = await PostService.getPosts();
    }
  },  
...

//del post in PostService.js
    static deletePost(id){
        return axios.delete(url+id)
    }

//backend delete api

router.delete('/:id',async (req,res)=>{
    const posts = await loadPostCollection()
    console.log(ObjectID(req.params.id))
    await posts.deleteOne({_id: ObjectID(req.params.id)});
    res.status(200).send()
})

预期输出：每个“帖子”的_id，例如：5cfa8c29f74c65ae485a6d93 实际输出：未定义

没有错误消息。

Answer 1

您需要添加属性引用post，如下所示：

<div class="post" v-for="(post,i) in posts " :key="post._id" :post="post" @dblclick="deletePost(post._id)">
        {{post.createdAt.getDate()}}/{{post.createdAt.getMonth() + 1}}/{{post.createdAt.getFullYear()}}
        <p class="text">{{post.text}}</p>
      </div>

Answer 2

您不必在前端将 _id 转换为Mongo ObjectID。

您的代码看起来很正常，将所有post对象发送给类似的函数并对其进行调试。

@ dblclick =“ deletePost（post）”

可能您的后端返回 _id 作为对象。

MongoDB _id在前端（VueJS）返回未定义

2 个答案: