使用 Vue.js 显示单个项目

Question

我有一个项目列表，其中标题是显示项目详细视图的链接。单击标题，它会正确转到 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>

感谢任何cmets

url + Id

Answer 1

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

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

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

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

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

然后我们可以通过引用索引 0 来拉出 bus1：

var bus1New = busArr[0]

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

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