gpt4 book ai didi

javascript - Vuejs 嵌套来自 API 的 JSON 数据不显示

转载 作者:行者123 更新时间:2023-12-03 00:36:48 25 4
gpt4 key购买 nike

从 API 获取 json 数据时,无法访问嵌套的 ppt。

我的 Vue 组件

var profileComponent = {
data : function() {
return {
isError : false,
loading : true,
users : null,
activeUser : '',
}
},
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(response => (this.users = response.data))
.catch(error => {console.log(error);this.isError = true})
.finally(() => {console.log('GET request from users');this.loading = false})
},
template : `
<div class="profile">
<div v-if="isError">
<h3>There was an error</h3>
</div>
<div v-else-if='isLoading'>
Loading
</div>
<div v-else>
<select v-model="activeUser">
<option v-for="user in users" v-bind:value="user">{{ user.name }}</option>
</select>
</div>
<div class="temp">
<p>{{ activeUser.address.street }}</p>
</div>
</div>
`}

这不起作用,但是当我将 {{ activeUser.address.street }} 更改为 {{ activeUser.address }} 时,它开始工作。请注意来自的用户对象jsonplaceholder 网站也包含街道 ppt。我缺少什么?

最佳答案

activeUser 默认情况下是一个空字符串,因此您访问 activeUser.address 它是未定义的,如果您使用 activeUser.address.street 它会给出错误要解决此问题,您可以使用

<p>{{ (activeUser && activeUser.address)? activeUser.address.street : ''}}</p>  

而不是简单的

<p>{{ activeUser.address.street }}</p>

关于javascript - Vuejs 嵌套来自 API 的 JSON 数据不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53625821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com