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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 3393 天前的主题，其中的信息可能已经有所发展或是发生改变。

首先我在 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 条回复 2016-07-03 00:54:37 +08:00

chairuosen

2016-07-02 00:26:37 +08:00

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

Plumes

2016-07-02 00:40:20 +08:00

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

chairuosen

2016-07-02 00:47:47 +08:00

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

stiekel

2016-07-02 06:34:50 +08:00

我想说，你这个：

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

根本不是数组啊。

Balthild

2016-07-03 00:54:37 +08:00 via Android

@stiekel 他说的是 review_list