Vue:访问超过 api 的值(嵌套)
Vue: Access values over api (nested)
嗨,Whosebug 社区,
在我的模板中,我尝试显示通过 api 调用接收到的数据。当我记录 api 获取响应时,这是我收到的:
现在我尝试使用以下代码显示位置数据:
{{ userdetails.location.location_name }}
我的脚本如下所示:
data() {
return {
userdetails: [],
};
},
methods: {
getUserData() {
DataService.getUserById()
.then((response) => {
this.userdetails = response.data;
console.log(response);
})
...
created() {
this.getUserData();
},
奇怪的是,我可以在我的应用程序中看到 location_name。但我也收到一个错误:
我想我哪里弄错了,但我找不到了。你知道我做错了什么吗?
提前感谢您的所有小费!
开始时,当模板尝试访问 userdetails.location.location_name
时,它是一个空列表,因此您会看到错误。只有 DataService
更新后 userdetails
才会存在嵌套属性。
防止这种情况最简单的方法是从 userdetails
作为 'falsey' 开始,然后使用 v-if
来确定是否渲染:
<div v-if="userdetails">{{userdetails.location.location_name}}</div>
data() {
return {
userdetails: undefined,
};
},
但是请注意,如果您的 DataService
可以 return 一个没有 location
属性 的字典,您将需要在 v-if
判断是否可以渲染。
嗨,Whosebug 社区,
在我的模板中,我尝试显示通过 api 调用接收到的数据。当我记录 api 获取响应时,这是我收到的:
现在我尝试使用以下代码显示位置数据:
{{ userdetails.location.location_name }}
我的脚本如下所示:
data() {
return {
userdetails: [],
};
},
methods: {
getUserData() {
DataService.getUserById()
.then((response) => {
this.userdetails = response.data;
console.log(response);
})
...
created() {
this.getUserData();
},
奇怪的是,我可以在我的应用程序中看到 location_name。但我也收到一个错误:
我想我哪里弄错了,但我找不到了。你知道我做错了什么吗?
提前感谢您的所有小费!
开始时,当模板尝试访问 userdetails.location.location_name
时,它是一个空列表,因此您会看到错误。只有 DataService
更新后 userdetails
才会存在嵌套属性。
防止这种情况最简单的方法是从 userdetails
作为 'falsey' 开始,然后使用 v-if
来确定是否渲染:
<div v-if="userdetails">{{userdetails.location.location_name}}</div>
data() {
return {
userdetails: undefined,
};
},
但是请注意,如果您的 DataService
可以 return 一个没有 location
属性 的字典,您将需要在 v-if
判断是否可以渲染。