Action passed to a classic component via angle bracket invocation throws "not a function" error

I have this classic ember component called list-pagination.js

import Component from '@ember/component';

export default Component.extend({
	actions: {
    goToNextPage() {
      // Do some checks
   		this.attrs.onNext(20); // Not Working
      // this.attrs.onNext.value(20); // Working
    }
  }
});

When i invoke this component using the angle bracket syntax from an octane class like

<ListPagination @onNext={{this.loadNextPage}} />

The action goToNextPage throws an error saying

this.attrs.onNext is not a function

If i call this.attrs.onNext.value() it works.

I would like to know what is wrong with this implementation. Here is a twiddle with a simple reproduction of this issue.

2 posts - 2 participants

Read full topic