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

随声附和 提交于 2019-12-22 17:34:23

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'
            })
        }
    }

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!