如何使用vue tables 2（JSX）绑定vue click事件？ [英] How to bind vue click event with vue tables 2 (JSX)?

问题描述

使用 https://github.com/matfish2/vue-tables-2 ，使用Vue版本2，我似乎无法绑定JSX上的click事件（在模板 - >编辑）：

Using https://github.com/matfish2/vue-tables-2, with Vue version 2, I can't seem to bind the click event on JSX (on templates->edit):

var tableColumns = ['name', 'stock', 'sku', 'price', 'created_at']
var options = {
  compileTemplates: true,
  highlightMatches: true,
  pagination: {
    dropdown: true,
    chunk: 10
  },
  filterByColumn: true,
  texts: {
    filter: 'Search:'
  },
  datepickerOptions: {
    showDropdowns: true
  },
  templates: {
    edit: function (h, row) {
      return <button v-on:click={this.showItem(row.id)} class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
    },
    delete: function (h, row) {
      return <a href="javascript:void(0);" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-erase"></i></a>
    }
  }
}

export default {
  name: 'ItemList',
  data: function () {
    return {
      options: options,
      columns: tableColumns
    }
  },
  methods: {
    showItem: function (id) {
      console.log(id)
    }
  }
}

更改为JSX 点击，但Vue无法识别。
.babelrc 已经：

Changed to JSX on-click, but Vue cannot recognize that. .babelrc already has:

{
    "presets": ["es2015"],
  "plugins": [
    "transform-runtime",
    "transform-vue-jsx"
  ]
}

推荐答案

我学到了很多，因为我我在寻找解决方案时不熟悉JSX。但是，请勿使用 onClick ，而是使用点击。

I learned this the hard way, since I'm not familiar with JSX when I was looking for the solution for this. However, don't use onClick, but on-click instead.

在这里：

ES6

edit: (h, row) => {
  return <button on-click={ () => this.showItem(row) } class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
},

ES5：

edit: function (h, row) {
  return <button on-click={ this.showItem.bind(this, row) } class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-edit"></i></button>
},

这篇关于如何使用vue tables 2（JSX）绑定vue click事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！