[英]Vuejs nested JSON data from API not displaying
從API獲取json數據時,無法訪問嵌套的ppts。
我的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網站中的users對象也包含street ppt。我缺少什么?
activeUser默認情況下為空字符串,因此您訪問activeUser.address時未定義,如果使用activeUser.address.street
則會產生錯誤。要解決此問題,可以使用
<p>{{ (activeUser && activeUser.address)? activeUser.address.street : ''}}</p>
而不是簡單
<p>{{ activeUser.address.street }}</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.