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>