1. 程式人生 > >Error in mounted hook: "TypeError: this.$refs.list.$el.refresh is not a function"

Error in mounted hook: "TypeError: this.$refs.list.$el.refresh is not a function"

在子元件scroll.vue中的methods選項中定義方法refresh(),如下所示:

//當已經存在berre-scroll例項的時候,DOM發生變化時,要對better-scroll例項重新更新  
refresh() {  
  this.scroll && this.scroll.refresh()  
} 

然後在父元件music-list.vue中的template呼叫子元件scroll

<scroll ref="list" @scroll="scroll" :data="songs" :probeType="probeType" :listenScroll="listenScroll" class="list">  

接著在父元件music-list.vue中的methods中定義方法handlePlaylist(),在裡面呼叫子元件的方法refresh()

 this.$refs.list.$el.refresh()

然後報錯:大致意思是說function()不是一個函式,但是明明在子元件中已經定義了

TypeError: this.$refs.list.$el.refresh is not a function
    at VueComponent.handlePlaylist (music-list.vue?f694:81)
    at VueComponent.mounted (mixin.js?98c1:14)
    at callHook (vue.esm.js?efeb:2921)
    at insert (vue.esm.js?efeb:4158)
    at Object.invoker [as insert] (vue.esm.js?efeb:2023)
    at invokeInsertHook (vue.esm.js?efeb:5960)
    at VueComponent.patch [as __patch__] (vue.esm.js?efeb:6179)
    at VueComponent.Vue._update (vue.esm.js?efeb:2670)
    at VueComponent.updateComponent (vue.esm.js?efeb:2788)
    at Watcher.get (vue.esm.js?efeb:3142)

分析:通過this.$refs.list.$el是拿到子元件的DOM物件,因此不能呼叫javascript裡面定義的方法

解決方法:通過this.$refs.list是拿到子元件物件,拿到這個物件之後就可以呼叫子元件的方法了

 this.$refs.list.refresh()

其實對於this.$refs.list.$el和this.$refs.list的區別也不是很明白,希望有高人指點