Question

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

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

Report.vue

在邮递员中有效的后端请求是

// 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}`)
  }

Report.vue文件如下

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
        }
      },
  }

非常感谢您的帮助！

Answer 1

不仅要获取第一个条目，而且要查找的条目也需要更改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（）调用，以将正确的参数传递给它。

Answer 2

似乎您正在尝试在api中访问一个参数而未在请求中传递参数。您在这里请求参数：

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

，但未在您的请求中传递任何内容。应该这样做：

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

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

2 个答案: