title: Vue.js not showing results after API call
body: <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/jqdmA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jqdmA.png" alt="enter image description here"></a></p>
  
  <p>This is what my Profile.vue looks like so far and I am just trying to get the firstName to display. </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="well"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;strong&gt;Student Name:  {{ records.firstName }}&lt;/strong&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import api from '../store/api.js'
  
    export default {
      name: 'Profile',
      data() {
        return {
          records: {},
        };
      },
      created() {
        api.GetInquiriesByUser(this.$router.currentRoute.params.lastName).then((response) =&gt; {
          this.records = response.data;
        });
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>