Node.js 使用Vue.js显示单个项目_Node.js_Mongodb_Vue.js

Node.js 使用Vue.js显示单个项目

node.js mongodb vue.js

Node.js 使用Vue.js显示单个项目,node.js,mongodb,vue.js,Node.js,Mongodb,Vue.js,我有一个项目列表，其中标题是显示项目详细视图的链接。单击标题，它将正确转到url+Id。在Vue tolls中，详细信息页面检索具有匹配Id的项，但作为和数组不是对象，模板不显示任何属性-我缺少什么 <script> import axios from "axios"; export default { name: "Report", data() { return { report: {} }; }, mounted: functi

我有一个项目列表，其中标题是显示项目详细视图的链接。单击标题，它将正确转到url+Id。在Vue tolls中，详细信息页面检索具有匹配Id的项，但作为和数组不是对象，模板不显示任何属性-我缺少什么

<script>
import axios from "axios";

export default {
  name: "Report",

  data() {
    return {
      report: {}
    };
  },

  mounted: function() {
    this.getReport();
  },

  methods: {
    getReport() {
      let uri = "http://localhost:5000/api/reports/" + this.$route.params.id;
      axios.get(uri).then(response => {
        this.report = response.data;
      });
    }
  }
};
</script>


从“axios”导入axios；
导出默认值{
名称：“报告”，
数据（）{
返回{
报告：{}
};
},
挂载：函数（）{
这个.getReport（）；
},
方法：{
getReport（）{
让uri=”http://localhost:5000/api/reports/“+此.$route.params.id；
get（uri）。然后（响应=>{
this.report=response.data；
});
}
}
};

模板是这样的

<template>
  <v-content>
    <h1>report detail page</h1>
    <p>content will go here</p>-
      <h3>{{ report.month }}</h3>
      <pre>{{ report._id }}</pre>
  </v-content>
</template>


报告详细信息页面
内容将放在此处-
{{report.month}
{{报告.\u id}

有什么意见吗

听起来您的问题在于接收的是数组而不是对象

可以轻松拉出封装在阵列中的对象

例如，如果我们有以下数据：

var-bus1={乘客：10，班次：1}
var busArr=[bus1]

我们可以断言：

busArr==[{乘客：10，班次：1}]

然后，我们可以通过引用索引0拉出总线1：

var bus1New=busArr[0]

如果您想避免数据转换，只需输出结构，您可以在模板中考虑V-Apv.


_id:{val.\u id}


月份：{{val.month}