使用 v-if 时遇到的一个问题

› Vue.js

This topic created in 3779 days ago, the information mentioned may be changed or developed.

首先我在 data 里定义了一个变量 review，初始值为 {}，然后我使用 vue-resource 从服务器获取数据，将返回的数据赋给 review, 返回的数据为

{
  review_info:{a:'a',b:'b'},
  review_list:[]//空数组
}

然后我在模板里将 review_list 作为判断条件

当我使用 v-if='review.review_list.length > 0 ' 时，会报错 Cannot read property 'length' of undefined

但是当我使用 v-if='review.review_list !== undefined ' 时，此条件又为真这两个矛盾的结果为什么会同时成立呢？

5 replies • 2016-07-03 00:54:37 +08:00

chairuosen

Jul 2, 2016

并不是同时，第一个报错是初始化时的报错，这时 ajax 还没回来呢。
第二个是初始为 undefined ，但是 ajax 在你感觉不到的极短时间内回来了，他就为真了。
你这么写就行了 `review.review_list && review.review_list.length`

Plumes

Jul 2, 2016

@chairuosen 写成 `review.review_list!==undefined && review.review_list.length` 确实可以，但是完全不能理解啊，
为什么单独使用时为真的条件 A ，和单独使用时会报错的条件 B ，在拼接使用后 A && B 会等于 false ？

chairuosen

Jul 2, 2016

@Plumes 两种情景的结果并不在同一时间点发生
你可以理解成这个 if 条件要执行两次，两次都不能报错，你能看到的只是第二次的结果。
两次 review 的值分别为{}与{review_list:[]}
`review.review_list!==undefined && review.review_list.length` 这个条件，在第一次 review 为{}时，`&&`左边为假，所以右边就不执行了。第二次时，左边为真，所以继续执行看右边，右边的结果就是最终结果，是 0 ，会被转成 false 。

stiekel

Jul 2, 2016

我想说，你这个：

```js
review_info:{a:'a',b:'b'},
```

根本不是数组啊。

Balthild

Jul 3, 2016 via Android

@stiekel 他说的是 review_list