Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of...

1、项目报错如下：

 

2、先访问别的路由，在访问这个页面的路由这样不报错，但是我直接在这个页面上刷新就报错

 

3、分析解决：

                     1）找到我的length出现的地方，说出错说明现在info里面是空的

                        

 

　　　　　　2）先进入其他路由---在进入当前路由---------此时我的info已经拿到了，vuex里面存的不是空对象了, 这种方式不会报错

　　　　　　3）直接在这个页面刷，当前路由对象就会创建，第一次显示的时候vuex里面是空的，所以会报错。

 

4、 

 用户可能从两个地方访问这个路由组件，下面是考虑两种方式进来的代码

 

mounted(){    //方式一：从别的路由组件切换过来走这里
        new BScroll('.shop-info')
    
        if(!this.info.pics)
            return     
        new BScroll('.pic-wrapper',{
            scrollX:true
        })
        const liWidth = 120;
        const space = 6;
        const objUl = this.$refs.picsUl;
        
        objUl.style.width = (liWidth + space)*this.info.pics.length - space + 'px'

    },

//方式二：用watch监视到当前vuex里面的info有数据了才执行后面的
    watch:{ //在当前组件刷新
        info(){
            this.$nextTick(()=>{
            
                new BScroll('.pic-wrapper',{
                    scrollX:true
                })
                const liWidth = 120;
                const space = 6;
                const objUl = this.$refs.picsUl;
                
                objUl.style.width = (liWidth + space)*this.info.pics.length - space + 'px'
            })
        }
    }

 

转载于:https://www.cnblogs.com/xxm980617/p/10878390.html