如何从数据表内的链接调用 Vue.js 方法?

Question

我正在使用 Vue Webpack 模板构建一个 Vue.js 应用程序。在一个组件中，我正在初始化一个数据表，如下所示：

<script>
export default {
name: 'DataTable',
mounted() {
$('#datatable').dataTable({
serverSide: true,
ajax: {
url: '/tableData',
},
processing: true,
searching: false,
pageLength: 25,
order: [[0, 'desc']],
columns: [
{
searchable: false,
data: 'updatedAt',
render: data => format(new Date(data), 'MMM Do, YYYY - h:mm:ss a'),
},
{
orderable: false,
data: 'user',
render: (data) => {
return `${data.firstName} ${data.lastName}`;
},
},
{
searchable: false,
orderable: false,
render() {
return '<a href="javascript:void" @click="openModal">View Details</a>';
},
},
],
});
},
methods: {
openModal() {
console.log('Open modal code goes here');
}
}
}
</script>

这工作正常，表格在浏览器中呈现。我的问题 - 如何从数据表内部调用openModal()方法？如您所见，我正在尝试在columns[2].render中调用该方法，但这不起作用(可能是因为 Vue 不编译返回字符串。我怎样才能做到这一点？

Answer 1

您可以在数据表回调上添加单击事件。 希望这有帮助

mounted() {
var self = this;
$('#datatable').dataTable({
serverSide: true,
ajax: {
url: '/tableData',
},
processing: true,
searching: false,
pageLength: 25,
order: [[0, 'desc']],
columns: [
{
.........
},
{ title: 'Action', targets:7, data: 'id',
"render":function(data, type, row, meta){
//data item in case you want to send any data
return '<a  href="javascript:void" data-item-id='+data+' class="open-item">Open Modal</a>';
}
}
],
"drawCallback": function( settings ) {
$(".open-item").on( 'click', function (e) {
self.OpenModal(e.target.dataset.itemId);
});
}
});
},
methods: {
openModal:function() {
console.log('Open modal code goes here');
}
}