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

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