Vue.js"无法读取属性...未定义" - 绕过这种预期的行为

时间:2017-10-03 00:28:28

标签: javascript mongodb vue.js vuejs2 undefined

是否知道如果在Vue.js模板中显示Object属性,并且该对象未定义 - 这将使组件崩溃。如果它们未定义,则常规变量没有问题。

这种行为是一种杀戮。在我看来非常通用的情况下,避免这个问题的最佳方法是什么?

所以我将数据存储在NoSQL数据库中,即Mongo,并有一个Vue.js组件来查看和修改集合中的文档。哪个效果很好。

但是如果我向我的架构添加一个带有属性的Object(例如带zip的地址,状态......),并更新组件以显示它们,那么现在我的webapp中的所有组件都会崩溃,因为显示这些文档对象不在数据中。只有新文档(带有新对象)才会正确显示,除非我通过数据库添加这个"地址"反对每个现有文件。

如果模板可以让用户有机会查看空白或添加数据库中已有的数据,那就太棒了。

在这种情况下,最佳做法是什么?

这里是否应该避免使用对象?

1 个答案:

答案 0 :(得分:4)

这与Vue没有任何关系。你在这里处理一个javascript错误。您不能引用null / undefined变量的属性。解决这个问题的简单方法是使用&& amp;操作员检查对象。

someObj && someObj.property

如果someObj是假的,则永远不会评估右侧。请注意,当左侧是真的时,&&返回右侧。详情:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

如果您想要特定的空白值,可以执行此操作

someObj ? someObj.property : "Default value"