Vue.js 渲染时出错："；TypeError:无法读取属性'；文本'；“未定义”的定义；

为什么它在传递标题和描述时没有显示任何错误，但在呈现时显示了一个错误：“TypeError:无法读取content.link.text上未定义“的属性“text”

家长

<template>
 <div>
  <splash :content="Splash"></splash>
 </div>
</template>

<script>
import Child from './Child.vue'

export default {
    name: 'Main',

    data () {
        Splash: {},
    },

    created () {
        const ax = axios.create({
        baseURL: '/static'
        })
        ax.get('content.json')
        .then(res => {

            this.Splash = res.data.general.splash

        })
    },

    components: {
        Splash
    }
   }
</script>

---

这很可能是由于第一次渲染时

content

的值造成的。这是一个空对象，它将为任何属性返回未定义的

content = {}
link = content.link // link is undefined
link.text // error

您应该为首次呈现设置一个条件，以便除非内容具有有效值，否则不会显示内容

---

扩展

您的承诺在创建的钩子中，但由于它是异步的，所以它只会在当前同步周期结束后的某个时间点返回数据。到那时，飞溅组件将已经与将导致错误的对象一起创建

如果您将要执行这样一种模式，即获取真实数据，那么根据您希望用户流如何工作，您可以使用一些模式

使用lodash u2;包装所有可能存在或不存在的数据。然后，您的

content.link.text

将进入计算属性，类似于

return\uuu.get（content，'link.text'）

。这将导致它在此处正确返回一个值

在异步请求完成之前不要呈现启动，而加载显示加载

在飞溅组件中使用v-if来防护

---

在这些问题中，我想说2是最好的b/c，它可以解决问题。

@Ausito已经给出了答案。但我想我应该举个例子。
默认设置

Splash

为

null

，并将

v-if=“Splash”

放入

Splash

组件中

<template>
 <div>
  <splash v-if="Splash" :content="Splash"></splash>
 </div>
</template>

<script>
import Child from './Child.vue'

export default {
    name: 'Main',

    data () {
        Splash: null,
    },

    created () {
        const ax = axios.create({
        baseURL: '/static'
        })
        ax.get('content.json')
        .then(res => {
            this.Splash = res.data.general.splash
        })
    },

    components: {
        Splash
    }
   }
</script>

从“/Child.vue”导入子项
导出默认值{
名称：'Main'，
数据（）{
Splash:null，
},
创建（）{
常量ax=axios.create({
baseURL:“/static”
})
get（'content.json'）
。然后（res=>{
this.Splash=res.data.general.Splash
})
},
组成部分：{
飞溅
}
}

你能再给我解释一下它是如何工作的吗。。所以基本上我使用了创建的钩子。。在呈现之前将json文件中的内容分配给对象。。我想在那之后，它会呈现内容，但现在内容不再是空的…即使我在content.title或content.description上没有收到任何错误消息。。它只发生在contentWill中的对象中

content = {}
link = content.link // link is undefined
link.text // error

<template>
 <div>
  <splash v-if="Splash" :content="Splash"></splash>
 </div>
</template>

<script>
import Child from './Child.vue'

export default {
    name: 'Main',

    data () {
        Splash: null,
    },

    created () {
        const ax = axios.create({
        baseURL: '/static'
        })
        ax.get('content.json')
        .then(res => {
            this.Splash = res.data.general.splash
        })
    },

    components: {
        Splash
    }
   }
</script>