• 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'
                })
            }
        }
    虽然现在走得很慢,但不会一直这么慢
  • 相关阅读:
    MFC对话框控件数据提取之DoDataExchange()
    慎用USES_CONVERSION
    Oracle OCP 11G 051(61题版本)答案解析目录
    OCP-1Z0-新051-61题版本-61
    OCP-1Z0-新051-61题版本-60
    OCP-1Z0-新051-61题版本-59
    OCP-1Z0-新051-61题版本-58
    OCP-1Z0-新051-61题版本-57
    OCP-1Z0-新051-61题版本-55
    OCP-1Z0-新051-61题版本-56
  • 原文地址:https://www.cnblogs.com/xxm980617/p/10878390.html
Copyright © 2020-2023  润新知