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

2016-07-02 00:04:50 +08:00
 Plumes

首先我在 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 ' 时，此条件又为真 这两个矛盾的结果为什么会同时成立呢？

9856 次点击
所在节点    Vue.js
5 条回复
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
@stiekel 他说的是 review_list

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/289728

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX