[英]Vue.js not showing results after API call
I am having difficulties presenting the results on vue.js. 我很难在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).
我可以在google chrome上的vue开发工具中看到,我正在从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. 到目前为止,这就是我的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>
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.
如果我需要添加更多信息,可以提供它,因为我是从API中获取数据的,因此我假设该错误在我的Profile.vue中。 Maybe I am not passing firstName correctly?
也许我没有正确传递firstName?
Your records
property is an array not an object, that array contains only one item which you should access it like : 您的
records
属性是一个数组,而不是一个对象,该数组仅包含一个项目,您应该像这样访问它:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.