VUE{{}}中数据渲染出现undefined

Background

在前端编码过程中，常常会出现在mustache表达式 {{}} 中undefine的某属性报错。原因是如果 {{}} 仅仅是个变量如 {{a}} 是不会报错的，a可以是undefine或者null。但是如果{{a.b}} 或者 {{a['b']}} ，那么当a是undefine的时候就会报错。

并且因为Ajax是异步加载所以常常出现加载数据之前报出这个错误。

Solution

1. 利用在标签上面添加v-if：例如： <div v-if="a">。
2. 在{{}}中利用三元运算符：例如：a ? a : '' 来判断是否为undefine。
3. 在VUE的data中预定义可能为undefined的变量值，比如 a=[]。

在编码过程中根据undefined的变量形式灵活运用规避方法，避免出现，undefinde的某属性问题。