_this.$refs.infiniteLoading.$emit is not a function

[tengqingya]

code：
loadMore: function () { console.log("loadMore") getChartDetail({id: this.charts[this.activeIndex]['id'],offset:this.chartsArray[this.activeIndex].length}).then(e=>{ this.chartsArray[this.activeIndex].push(...e.books) this.$refs.infiniteLoading&&this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); }).catch(e => { console.log(e) }) }
first time it will work，but when i continue to scroll ,next time will produce error ‘_this.$refs.infiniteLoading.$emit is not a function’

[emkman]

Same issue
Cannot read property '$emit' of undefined
Seems the ref doesn't register properly for some reason.

[PeachScript]

@tengqingya @emkman could you reproduce this problem on JSFiddle?

[feinimoshu753]

@emkman maybe is this reason? . When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

[jkiimm]

@PeachScript I have the same issue. it seems to be happened when a view is changed while some resource is loading.

const things = await fetchSomething() // the view(page) is changed while waiting for `fetchSomething`
this.$refs.loader.$emit('$InfiniteLoading:loaded')

What is the reason that the code is still working even after the view is changed? It could be related with vuejs/vue-router#1181?

[PeachScript]

Oh...sounds like that, thanks! I think If we plan to use await, we also should to process every possibility, through the result of await to decide whether execute the $emit statement, how do you think about it?

[zzmm1]

同样的问题，请问怎么解决？
“Uncaught (in promise) TypeError: Cannot read property '$emit' of undefined”

[PeachScript]

@zzmm1 暂时还没定位到真正的原因，只是有一些推测，有待验证。不知道你是否可以在 JSFiddle 上重现你遇到的问题?

[zzmm1]

未加载完成就停止，就会出现该错误。

[zzmm1]

持续关注中.....

[PeachScript]

@zzmm1 ，感谢，但我还没找到比较好的解决办法，也许应该换一种使用方式

[PeachScript]

Hi everyone @tengqingya @emkman @feinimoshu753 @jkiimm @zzmm1 @xuyukuan , I think this problem cannot be fixed if this component still use $refs to send event, because it cannot ensure the ref element always be accessible. For example if this component already was destroyed after the async request complete in the on-infinite function, but the callback function still try to emit event through the $refs.infiniteLoading, this error will be thrown.

So I plan to change the way to send the loaded and complete event, it may looks like this:

...
infiniteHandler(state) {
  ajax('https://www.google.com', (data) => {
    if (data.length) {
      state.loaded();
    } else {
      state.complete();
    }
  });
}
...

What do you think? And how about the variable name state?

Best regards.

[PeachScript]

Hi everyone, v2.2.0 has been released, include this change, you can try it now, please feedback to here if you find any problem, thanks :D

[FEjohnny]

oh! I have the same issue with v2.2.0(vue v2.4.3).

this.$nextTick(() => {
        this.$refs.scrollWrapper.$emit('$InfiniteLoading:reset');
 });

Error in nextTick: "TypeError: _this2.$refs.scrollWrapper.$emit is not a function。
thanks for help。

[PeachScript]

@FEcorlin did you $emit this event after the component be destroyed?

[PeachScript]

No updates, I will close this issue, you can reopen it if you need in the future.

[ghost]

Hi, I have a question - I need to stop loader depending on some condition in one of the methods, that has nothing to do with infiniteHandler. Currently I do it by using $ref:

if ( this.$refs.infiniteLoading)
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');

so I'm getting [Vue-infinite-loading warn], which is tripping me up and it seems like there's no other way -
is there?

[PeachScript]

@Bruddah you can use the this.$refs.infiniteLoading.stateChanger.loaded() method to do that.

[aoyoo111]

@Bruddah you can use the this.$refs.infiniteLoading.stateChanger.loaded() method to do that.

nice