Error in mounted hook: "TypeError: Cannot set property 'bottom' of undefined"
在子组件scroll.vue中的methods选项中定义方法refresh(),如下所示://当已经存在berre-scroll实例的时候,DOM发生变化时,要对better-scroll实例重新更新refresh() {this.scroll && this.scroll.refresh()}然后在父组件music-list.vue中的t...
·
在父组件music-list.vue中的template调用子组件scroll
<scroll ref="list" @scroll="scroll" :data="songs" :probeType="probeType" :listenScroll="listenScroll" class="list">
在父组件music-list.vue的methods中的某个方法中设置子组件的根元素的bottom值
this.$refs.list.style.bottom = bottom
然后再浏览器中就报如下错误:大致意思是说不能设置属性bottom,因为它没有定义;报错的地方是在music-list.vue文件中的方法handlePlaylist()中的79行发生错误,也就是this.$refs.list.style.bottom = bottom有错
vue.esm.js?efeb:1741 TypeError: Cannot set property 'bottom' of undefined at VueComponent.handlePlaylist (music-list.vue?f694:79) at VueComponent.activated (mixin.js?98c1:18) at callHook (vue.esm.js?efeb:2921) at activateChildComponent (vue.esm.js?efeb:2894) at activateChildComponent (vue.esm.js?efeb:2892) at activateChildComponent (vue.esm.js?efeb:2892) at Object.insert (vue.esm.js?efeb:4169) at invokeInsertHook (vue.esm.js?efeb:5960) at Vue.patch [as __patch__] (vue.esm.js?efeb:6179) at Vue._update (vue.esm.js?efeb:2660)logError @ vue.esm.js?efeb:1741globalHandleError @ vue.esm.js?efeb:1732handleError @ vue.esm.js?efeb:1721callHook @ vue.esm.js?efeb:2923activateChildComponent @ vue.esm.js?efeb:2894activateChildComponent @ vue.esm.js?efeb:2892activateChildComponent @ vue.esm.js?efeb:2892insert @ vue.esm.js?efeb:4169invokeInsertHook @ vue.esm.js?efeb:5960patch @ vue.esm.js?efeb:6179Vue._update @ vue.esm.js?efeb:2660updateComponent @ vue.esm.js?efeb:2788get @ vue.esm.js?efeb:3142Watcher @ vue.esm.js?efeb:3131mountComponent @ vue.esm.js?efeb:2795Vue.$mount @ vue.esm.js?efeb:8540Vue.$mount @ vue.esm.js?efeb:10939Vue._init @ vue.esm.js?efeb:4640Vue @ vue.esm.js?efeb:4729(anonymous) @ main.js?1c90:25.c/main.js @ app.js:2923__webpack_require__ @ app.js:679fn @ app.js:890 @ app.js:2988__webpack_require__ @ app.js:679(anonymous) @ app.js:725(anonymous) @ app.js:728
分析:根据this.$refs.list.style.bottom = bottom可以知道本意是想获取子组件的DOM根元素,然后对这个元素的css属性bottom设置一个值,但是由于this.$refs.list只是获取到组件,并不能获取到子组件里面的DOM,这就是出错的原因
解决方法:通过$el选项获取到子组件的DOM,也就是改写成:this.$refs.list.$el.style.bottom = bottom,即this.$refs.list.$el可以获取到子组件的DOM
更多推荐
已为社区贡献31条内容
所有评论(0)