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

by

0👍

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.

Leave a comment