NuxtJs Axios 渲染问题未定义答案

【问题标题】：NuxtJs Axios rendering issue undifinedNuxtJs Axios 渲染问题未定义
【发布时间】：2020-07-24 23:33:05
【问题描述】：

当我尝试访问从文档内的 axios 调用加载的某些对象/属性时，

我得到未定义的属性，即使主对象被渲染得很好。

这是我尝试过的： index.vue：

<template>
    <div>
        {{ pageContent.Cover.formats.large.url}}
    </div>
</template>
<script>
    export default {
        data() {
            return {
                baseUrl: process.env.API_URL,
                pageContent: '',
            }
        },
        created() {
            this.$axios.$get(process.env.API_URL + '/about')
                .then(response => (this.pageContent = response))
        }
    }
</script>

这给了我以下错误：

类型错误无法读取未定义的属性“格式”

这是对象：

【问题讨论】：

添加一个console.log来查看axios.get的响应是什么，然后你就会发现问题。喜欢console.log(response);console.log(response.data);
记录console.log(response) 输出与您上面一样的确切对象=)。即使它显示在日志对象中，我也无法引用 {{ pageContent.Cover.formats.large.url}}

标签： javascript vue.js vuejs2 axios nuxt.js

【解决方案1】：

回调response 参数通常带有多个字段，例如data，所以你应该这样做：

.then(response => (this.pageContent = response.data))

然后在模板中添加条件渲染：

<div v-if="pageContent">
        {{ pageContent.Cover.formats.large.url}}
    </div>

【讨论】：

不是这种情况，响应只是对象数据本身。它不适用于您的示例。我的观点是我可以这样做：{{pageContent.Cover}} 并且 Cover 属性将与 cover.formats.large.url 一起很好地显示，但如果我这样做 {{ pageContent.Cover.formats.large.url}我得到未定义的。 ://
如何将pageContent初始化为空对象pageContent: {}
嗯……不幸的是还是一样，未定义。这是我执行 {{pageContent.Cover}} 时打印的对象，以便您可以将其视为参考：imgur.com/a/lNZnLcK。只是由于某种原因无法访问 {{pageContent.Cover.formats.large.url}}
{{ pageContent.Cover && pageContent.Cover.formats.large.url}} 或 <div v-if="pageContent.Cover"> {{ pageContent.Cover.formats.large.url}} </div> 怎么样