Mongodb 使用vue js和axios按id显示单个记录

我有一个mongodb express vue js应用程序，它在卡片中显示项目列表，这些卡片是指向每个记录详细视图的链接。如果我将鼠标悬停在卡片上，将显示链接的正确id，但单击任何卡片，它将转到来自mongo的第一个文档，并且不会显示记录。视图检索一个项目，但总是第一个项目

如何显示所单击项目的ID记录

在postman中工作的后端请求是

// Get Simgle Report
router.get('/:id', async (req, res) => {
  const reports = await loadReportsCollection()
  await reports.findOne({_id: new mongodb.ObjectID( req.params.id)})
  res.send(await reports.find({}).limit(1).toArray())
  res.status(200).send()
  }
)

ReportService.js看起来像

    //Find Single Report
  static getReport(id) {
    return axios.get(`${url}${id}`)
  }

mounted () {
    this.getReport()
  },

  methods: {
    async getReport() {
        try {
          const response = await ReportService.getReport(this.$route.params.id)
          this.report = response.data
        } catch(err) {
          this.err = err.message
        }
      },
  }

Report.vue文件如下所示

    //Find Single Report
  static getReport(id) {
    return axios.get(`${url}${id}`)
  }

mounted () {
    this.getReport()
  },

  methods: {
    async getReport() {
        try {
          const response = await ReportService.getReport(this.$route.params.id)
          this.report = response.data
        } catch(err) {
          this.err = err.message
        }
      },
  }

---

非常感谢你的帮助

您似乎试图访问api中的参数，而不在请求中传递参数。您在此处询问参数：

await reports.findOne({_id: new mongodb.ObjectID( req.params.id)})

但你的请求中没有任何内容。这应该做到：

return axios.get('/:id', {
  params: {
    id: `${id}`
  }
})

---

要不仅获取第一个条目，而且获取正在查找的条目，您需要更改

send（）

参数

以下是工作代码：

// Get Simgle Report
router.get('/:id', async (req, res) => {
    const reports = await loadReportsCollection()
    const report = await reports.findOne({_id: new mongodb.ObjectID(req.params.id)})
    res.send(await report)
    res.status(200).send()
  }
)

正如Andrew1325所述，您还需要更改axios.get（）调用，以便将正确的参数传递给它