Vue.js не показывает результаты

Question

У меня проблемы с представлением результатов на vue.js. В моих инструментах vue dev на Google Chrome я вижу, что я получаю данные из своего 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>