Question

为什么通过标题和描述不会显示任何错误，但会显示渲染错误：content.link.text上的“ TypeError：无法读取未定义的属性'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.json

<template>
    <div class="container">


        <h2>{{ content.title }}</h2>     // ok
        <p>{{ content.description }}</p> // ok              
        <p>{{ content.link.text }}</p>   // shows render error  
    </div>
</template>
<script>


export default {

    name: 'Splash',

    props: [
        'content'
    ]



}
</script>

Answer 1

@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>

Answer 2

最可能的原因是第一次渲染时的content的值。那是一个空对象，对于任何属性

都会返回未定义

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

您应该具有首次渲染的条件，以便除非内容具有有效值，否则您不会显示该内容。

扩展

您的promise在创建的hook中，但是由于它是异步的，因此它将仅在当前同步周期结束后的某个时间返回数据。到那时，将已经使用将导致错误的对象创建了Splash组件。

如果要执行这样的模式（将在其中获取实际数据），则可以根据您希望用户流的工作方式使用一些模式。

使用lodash _.get包装可能存在或可能不存在的所有数据。然后，您的content.link.text将进入计算的属性，并且类似return _.get(content, 'link.text')。这将导致它在此处正确返回一个值。
在异步请求完成之前不渲染Splash，而在加载时显示加载
在Splash组件中使用v-if进行防护

在这些问题中，我想说2是最好的b / c，它可以消除关注点。

呈现错误：“ TypeError：无法读取未定义的属性'text'”

2 个答案: