VUE.js записей не определено

Question

Я создаю приложение, в котором у меня есть список пользователей, и когда я нажимаю на одного пользователя, он переводит меня в профиль конкретного пользователя (Profile.vue).Я использую ASP.NET Core API с Vue.js в качестве внешнего интерфейса.Мой API работает, поэтому, когда я нажимаю на пользователя, я могу видеть данные, поступающие из моей базы данных, используя Chrome dev Tools и Postman.Когда я открываю Vue Dev Tools в Chrome, я вижу, что данные «неопределенные».Например, я просто пытаюсь показать пользователям firstName, чтобы я знал, что это работает.

Так я перенаправляю свою страницу из списка пользователей в профиль определенного пользователя

 methods: {
      editItem(lastName) {
        this.$http.get(`http://localhost:61601/api/GetInquiry/${lastName}`)
        this.$router.push({ path: `/Profile/${lastName}` }) 
      },
      async GetAllInquiries() {
        this.loading = true

        try {
          this.records = await api.GetAllInquiries()
        } finally {
          this.loading = false
        }
      },

Однажды ямаршрутизирую, вот мой Profile.Vue, который будет отображать информацию пользователей

<template>
  <div>
        <h2>Student Info</h2>
        Student Name: {{ records.firstName }}
        <br />

  </div>
</template>

<script>
  import api from '../store/api.js'

  export default {
    data() {
      return {
        records: {
          firstName: this.firstName
        },
      }
    },
    async created() {
      this.GetInquiriesByUser()
    },
    methods: {
      async GetInquiriesByUser() {
        this.loading = true
      },
      post: function () {
        this.$http.get('http://localhost:61601/api/inquiry', {
          firstName: this.firstName
        })
      }
    }
  }
</script>

API.js

import Vue from 'vue'
import axios from 'axios'

const client = axios.create({
  baseURL: 'http://localhost:61601/api/',
  json: true
})

export default {
  async execute(method, resource, data) {
    return client({
      method,
      url: resource,
      data,
    }).then(req => {
      return req.data
    })
  },
  GetAllInquiries() {
    return this.execute('get', '/Inquiry')
  },
  GetInquiriesByUser() {
    return this.execute('get', '/GetInquiry/')
  },
  create(data) {
    return this.execute('post', '/', data)
  },
  update(id, data) {
    return this.execute('put', `/${id}`, data)
  },
  delete(id) {
    return this.execute('delete', `/${id}`)
  }
}

GetInquiryByUser Controller

 [Route("api/[controller]")]
    public class GetInquiryController : BaseController
    {
        private GetInquiryByUser manager;
        public GetInquiryController(IConfiguration config) : base(config)
        {
            manager = new GetInquiryByUser(config);
        }

        [HttpGet("{lastName}")] //api/GetInquiry/yourlastname
        public IEnumerable<InquiryModel> Get([FromRoute]string lastName)
        {
            return manager.GetInquiriesByUser(lastName);
        }
    }

Контроллер запросовполучает список всех пользователей, и мой GetInquiryByUser передает lastName, чтобы получить профиль конкретного пользователя.(в конце концов я передам уникальный идентификатор, просто пока тестирую). Я использую режим хеширования и для vue-маршрутизации.Сначала я не понимал, какой режим я использовал, и у меня была комбинация истории и хэша, но я думаю, что теперь я весь хэш-режим.Если кто-то может указать мне правильные направления, это было бы здорово!Пожалуйста, дайте мне знать, если мне нужно подробности.