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

Question

在我的 Vue 驱动的 HTML 中，我有一行

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

Vue 实例中的

data 定义为

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

• 声明一个空数组。它将帮助其他开发人员理解前期数据结构
• 尽可能让您的标记少一些逻辑。使用 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>