node.js - 使用 Vue.js 显示单个项目

我有一个项目列表，其中标题是一个链接，用于显示该项目的详细 View 。单击标题，它会正确转到 url + Id。在 Vue 收费中，详细信息页面检索具有匹配 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>

模板就是这样

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

欢迎任何评论

url + Id

最佳答案

听起来您的问题是您收到的是数组而不是对象。

您可以轻松提取封装在数组中的对象。

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

var bus1 = {passengers:10, shift:1} var busArr = [bus1]

我们可以断言:busArr === [{passengers:10, shift:1}]

然后我们可以通过引用索引 0 来取出总线 1:

var bus1New = busArr[0]

如果您想避免数据转换并仅输出结构，您可以考虑在模板中使用 v-for。

<p v-for="val in report"> _id: {{val._id}} <br> month: {{val.month}} </p>