0

我目前正在实现 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问题已经尝试实现它，但没有成功-->如何将vue点击事件与vue表2（JSX）绑定？

感谢您提前提供的所有帮助。

4

1 回答 1

0

我看到几个问题：

语法错误：

代替

 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 实例，如文档中所述：

此外还有一个 this 上下文可用，它指的是根 vue 实例。

所以$parent已经过时了。您甚至可能必须使用$childrenor $refs，具体取决于您的应用程序结构（使用 chrome 开发工具探索树，您将找到确切的“地址”）。

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

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

顺便说一句，由于 Vue 在 v2.1 中引入了作用域插槽，因此最好使用那些而不是 jsx，后者需要编译，并且通常处理起来更麻烦。

于 2017-12-06T07:43:51.523 回答