时间戳

首页 > 解决方案 > 如何在Vue js中处理“渲染错误：TypeError：无法读取未定义的属性'abc'”

javascript - 如何在Vue js中处理“渲染错误：TypeError：无法读取未定义的属性'abc'”

问题描述

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

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

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

标签： javascriptvue.jsvue-component

解决方案

你可以使用这样的东西：

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

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

解决这种冲突的一种方法是在你的对象中定义一个getterlike for ，如下所示：xcomputed

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

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

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

推荐阅读