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

从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对象也包含街道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/