Vue.js not showing results after API call

Question

I am having difficulties presenting the results on vue.js. I can see in my vue dev tools on google chrome that I am getting the data from my API (ASP.NET CORE). However, I cannot display the results on the browser

This is what my Profile.vue looks like so far and I am just trying to get the firstName to display.

<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>

I've been digging for a while now and was wondering if someone can point out the error or point me in the right direction? If i need to add more information, I can provide it, since I am getting the data from my API, I am assuming that error is in my Profile.vue. Maybe I am not passing firstName correctly?

Answer 1

Your records property is an array not an object, that array contains only one item which you should access it like :

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

You could also do :

     this.records = response.data[0];

and keep your code in th template like this:

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