如何避免在初始化期间提供虚拟Vue数据结构？

Question

在我的Vue驱动的HTML中我有这条线

<span>Last updated on {{incident.LastUpdate[0].date}}</span>

data在Vue实例中定义为

data: {
    incident: {}
}

在执行过程中,incident是异步加载但在初始页面加载期间我看到了

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"
(...)
TypeError: Cannot read property '0' of undefined

这是可以理解的,因为incident内容尚不可用.当它们可用时,页面会正确显示.因此,错误是预测和暂时的,所以我可以忘记它.

然而,我希望将其静音并incident使用一些虚拟数据进行初始化

data: {
        incident: {
            LastUpdate: [
                {
                    date: null
                }
            ]
        },
    },

错误现在消失了,但我觉得这是解决它的尴尬方式.如果有更多数据要初始化,它也会变得很麻烦.

我的问题:在Vue中处理这个问题的正确方法是什么？我修复中的虚拟数据？

Answer 1

• 声明一个空数组.它将帮助其他开发人员提前了解数据结构
• 尽可能减少Markup逻辑.使用Computed方法检索第一个值,并进行错误处理.

看代码:

<template>
    <div>
        Last updated on {{lastUpdatedTime}}
    </div>
</template>
<script>
export default {
    data(){
        return {
            incident: {
                lastUpdate:[]
            }
        }
    },
    computed: {
        lastUpdatedTime () {
            if (this.incident.LastUpdate.length === 0) return '' // think about a default please :)
            return this.incident.LastUpdate[0].date
        }
    }

}
</script>