On click function in vue-tables-2 throwing fns.apply is not a function - vue.js

Question

I'm currently implementing vue-tables-2 (first time) and I've set up a template to show an icon that will fire an event when clicked. However, I'm getting an error that I'm not sure where it's deriving from. The error is the following.
Uncaught TypeError: fns.apply is not a function
at HTMLAnchorElement.invoker (vue.esm.js:1821)
templates: {
edit: function (h, row) {
return </i>
}
The function code itself is as follows.
editSchedulesBtn: function (rowId) {
console.log(rowId)
}
I have found this stackoverflow question have tried implementing it, but no success --> How to bind vue click event with vue tables 2 (JSX)?
Thanks for all assistance in advance.

Answer 1

I see a few problems:
A syntax error:
Instead of
edit: function (h, row) {
return </i>
}
Should be:
edit: function (h, row) {
return </i>
}
Secondly, the this context inside the function refers to the root vue instance, as stated in the docs:
In addition a this context will be available, which refers to the root
vue instance.
So the $parent is obsolete. You might even have to use $children or $refs, depending on your app structure (Explore the tree using the chrome dev tools and you will find the exact "address").
Thirdly, when binding an event with jsx you should not call the method directly, but use the bind method instead (As explained in the answer you have attached):
on-click={this.editSchedulesBtn.bind(this, row.id)} // See the aforementioned answer for ES6 syntax
As an aside, since Vue introduced scoped slots in v2.1, it is best to use those rather than jsx, which requires compilation, and is generally more cumbersome to deal with.