javascript - 如何在Vue js中处理未定义的 "Error in render: TypeError: Cannot read property ' abc'

Question

现实世界的数据通常并不像我们想象的那么结构化。我记得如果 AngularJS 模板尝试访问未定义的属性，它只会呈现一个空字符串。我非常喜欢这个默认设置。对于 Vue，一个错误就会导致整个组件无法渲染。

我读到了有关错误边界的内容，但包装可能访问未定义属性的每个元素是不现实的。

我的问题是:如何优雅地处理此类错误并自信地构建一个始终呈现的组件，即使数据错误？

Answer 1

你可以使用这样的东西:

<p>{{x?x.abc:""}}</p>

如果x未在您的数据对象中定义，这将引发冲突，但您的应用程序仍将正常运行。

解决此问题的一种方法是在您的计算对象中定义一个getter，例如x，如下所示:

{ 
  data(){
    _x:null, //or it may completely missing or an empty object {}
  },
  computed:{
    x: function(){
      return this._x?this._x:{}
    }
  }
}

现在你可以像这样使用它:

<p>{{x.abc}}</p>