javascript - Vue.js "Cannot read property ... of undefined"- 解决这个预期的行为

Question

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

这种行为令人扫兴。在我的情况下，这似乎很普遍，避免这个问题的最佳方法是什么？

因此，我将数据存储在 NoSQL 数据库(即 Mongo)中，并使用 Vue.js 组件来查看和修改集合中的文档。效果很好。

但是，如果我将一个具有属性的对象添加到我的架构中(例如带有 zip、状态的地址...)，并更新组件来显示它们，那么现在我的 web 应用程序中显示这些文档的所有组件都会崩溃，因为对象不在数据中。只有新文档(带有新对象)才会正确显示，除非我通过数据库并将此“地址”对象添加到每个现有文档中。

如果模板能让用户有机会查看空白数据或添加数据库中尚未存在的数据，那就太好了。

这种情况下的最佳做法是什么？

这里应该简单地避免物体吗？

Answer 1

这与 Vue 没有任何关系。您在这里处理的是 javascript 错误。您不能引用 null/ undefined variable 的属性。解决这个问题的简单方法是使用 && 运算符来检查对象。

someObj && someObj.property

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

如果你想要一个特定的空白值，你可以这样做

someObj ? someObj.property : "Default value"