When getting json data from API,Im unable to access nested ppts.
My Vue component
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>
`}
This Doesnt work but when I change {{ activeUser.address.street }}
to {{ activeUser.address }}
it starts working.Note the users object from jsonplaceholder website contains street ppt as well.What am I missing?
activeUser is an empty string by default so you access activeUser.address it is undefined and if you use activeUser.address.street
it gives an error For resolving this issue you can use
<p>{{ (activeUser && activeUser.address)? activeUser.address.street : ''}}</p>
instead of simple
<p>{{ activeUser.address.street }}</p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.