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

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 <a href='javascript:void(0);' on-click='$parent.editSchedulesBtn(${row.id})' ><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a>
      }

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.

Matanya · Answer 1 · 2017-12-06T07:58:27.930

I see a few problems:

A syntax error:

Instead of

 edit: function (h, row) {
        return <a href='javascript:void(0);' on-click='$parent.editSchedulesBtn(${row.id})' ><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a>
      }

Should be:

 edit: function (h, row) {
        return <a href='javascript:void(0);' on-click={this.$parent.editSchedulesBtn(row.id)}><i class='fa fa-pencil-square fa-2x' aria-hidden="true"></i></a>
      }

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.

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

1 Answers1