如何使用vue tables 2(JSX)绑定vue click事件? [英] How to bind vue click event with vue tables 2 (JSX)?
本文介绍了如何使用vue tables 2(JSX)绑定vue click事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用 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屋!
查看全文