Question

我目前正在实施vue-tables-2（第一次），并且我已经设置了一个模板来显示一个图标，该图标会在点击时触发事件。但是，我收到的错误是我不确定它的来源。错误如下。

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>
      }

功能代码本身如下。

editSchedulesBtn: function (rowId) {
  console.log(rowId)
}

我发现这个stackoverflow问题已尝试实现它，但没有成功 - ＆gt; How to bind vue click event with vue tables 2 (JSX)?

感谢您提前获得所有帮助。

Answer 1

我看到一些问题：

语法错误：

而不是

 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>
      }

应该是：

 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>
      }

其次，函数内的this上下文引用了根vue实例，如文档中所述：

此外，此上下文将可用，它指的是根 vue实例。

所以$parent已经过时了。您甚至可能必须使用$children或$refs，具体取决于您的应用结构（使用chrome dev工具探索树，您会找到确切的＆＃34;地址＆＃34;）。

第三，将事件与jsx绑定时，您不应直接调用该方法，而应使用bind方法（如您附加的answer中所述）：

on-click={this.editSchedulesBtn.bind(this, row.id)} // See the aforementioned answer for ES6 syntax

顺便说一句，由于Vue在v2.1中引入了作用域的槽，最好是use those而不是jsx，这需要编译，并且通常处理起来比较麻烦。

在vue-tables-2中的click函数抛出fns.apply不是一个函数

1 个答案: