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

【问题标题】：display single record by id with vue js and axios使用 vue js 和 axios 按 id 显示单个记录
【发布时间】：2019-07-25 04:52:04
【问题描述】：

我有一个 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
        }
      },
  }

非常感谢您的帮助！

【问题讨论】：

标签： mongodb express vue.js

【解决方案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() 调用以将正确的参数传递给它。

【讨论】：

【解决方案2】：

您似乎正在尝试访问您的 api 中的一个参数，而没有在您的请求中传递一个参数。你在这里要求参数：

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

但您的请求中没有通过任何内容。应该这样做：

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

【讨论】：