Having trouble accessing nested properties from API JSON data.
The Vue component I'm working on:
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>
`}
The issue arises when trying to access {{ activeUser.address.street }}, which doesn't work. However, changing it to {{ activeUser.address }} makes it function properly. The JSON data retrieved from jsonplaceholder website does contain the street property, so what could I be missing?