使用 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 ' 时,此条件又为真 这两个矛盾的结果为什么会同时成立呢?

9482 次点击
所在节点    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://www.v2ex.com/t/289728

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

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

© 2021 V2EX