API调用后Vue.js不显示结果答案

【问题标题】：Vue.js not showing results after API callAPI调用后Vue.js不显示结果
【发布时间】：2019-04-20 03:52:28
【问题描述】：

我在 vue.js 上呈现结果时遇到了困难。我可以在我的谷歌浏览器上的 vue 开发工具中看到我从我的 API（ASP.NET CORE）获取数据。但是，我无法在浏览器上显示结果

这是我的 Profile.vue 到目前为止的样子，我只是想让 firstName 显示。

<template>
  <div>
    <div class="well">
      <div class="row">
        <div class="col-md-3">
          <strong>Student Name:  {{ records.firstName }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '../store/api.js'

  export default {
    name: 'Profile',
    data() {
      return {
        records: {},
      };
    },
    created() {
      api.GetInquiriesByUser(this.$router.currentRoute.params.lastName).then((response) => {
        this.records = response.data;
      });
    },
  }
</script>

我已经挖掘了一段时间，想知道是否有人可以指出错误或指出正确的方向？如果我需要添加更多信息，我可以提供，因为我从我的 API 获取数据，我假设错误在我的 Profile.vue 中。也许我没有正确传递名字？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您的 records 属性是一个数组而不是一个对象，该数组只包含一个您应该访问它的项目：

       <strong>Student Name:  {{ records[0].firstName }}</strong>

你也可以这样做：

     this.records = response.data[0];

并将您的代码保存在模板中，如下所示：

         <strong>Student Name:  {{ records.firstName }}</strong>

【讨论】：