Vue.js在API调用后未显示结果

Question

我很难在vue.js上显示结果。 我可以在google chrome上的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中。 也许我没有正确传递firstName？

Answer 1

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

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

您也可以：

     this.records = response.data[0];

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

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