I am facing challenges in displaying the results using vue.js. The data from my API (ASP.NET CORE) is being retrieved successfully, as shown in my vue dev tools on Google Chrome. However, I am encountering difficulties in rendering the results on the browser.
https://i.sstatic.net/jqdmA.png
This is the current state of my Profile.vue file, where I am attempting to display the 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>
After extensive investigation, I am still unable to identify the root cause of the issue. I suspect it could be related to how I am passing the firstName parameter. Any guidance or insights would be greatly appreciated. Feel free to request additional information if needed.