如何将vue点击事件与vue表格2（JSX）绑定？

Question

使用，与Vue的版本2，我似乎无法在JSX click事件绑定（上模板 - >编辑）：

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 on-click，但Vue公司无法识别。 .babelrc已经有：

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

Answer 1

我这里学到了艰辛的道路，因为我不熟悉的JSX时，我一直在寻找这个解决方案。但是，请勿使用onClick，而是使用点击代替。

在这里你去：

ES6

edit: function (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> 
},