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

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

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

1 个答案: