V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Plumes
V2EX  ›  Vue.js

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

  •  
  •   Plumes · 2016-07-02 00:04:50 +08:00 · 9453 次点击
    这是一个创建于 2827 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先我在 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
        1
    chairuosen  
       2016-07-02 00:26:37 +08:00
    并不是同时,第一个报错是初始化时的报错,这时 ajax 还没回来呢。
    第二个是初始为 undefined ,但是 ajax 在你感觉不到的极短时间内回来了,他就为真了。
    你这么写就行了 `review.review_list && review.review_list.length`
    Plumes
        2
    Plumes  
    OP
       2016-07-02 00:40:20 +08:00
    @chairuosen 写成 `review.review_list!==undefined && review.review_list.length` 确实可以,但是完全不能理解啊,
    为什么单独使用时为真的条件 A ,和单独使用时会报错的条件 B , 在拼接使用后 A && B 会等于 false ?
    chairuosen
        3
    chairuosen  
       2016-07-02 00:47:47 +08:00   ❤️ 1
    @Plumes 两种情景的结果并不在同一时间点发生
    你可以理解成这个 if 条件要执行两次,两次都不能报错,你能看到的只是第二次的结果。
    两次 review 的值分别为{}与{review_list:[]}
    `review.review_list!==undefined && review.review_list.length` 这个条件,在第一次 review 为{}时,`&&`左边为假,所以右边就不执行了。第二次时,左边为真,所以继续执行看右边,右边的结果就是最终结果,是 0 ,会被转成 false 。
    stiekel
        4
    stiekel  
       2016-07-02 06:34:50 +08:00
    我想说,你这个:

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

    根本不是数组啊。
    Balthild
        5
    Balthild  
       2016-07-03 00:54:37 +08:00 via Android
    @stiekel 他说的是 review_list
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2946 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:10 · PVG 22:10 · LAX 07:10 · JFK 10:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.