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

Question

我正在使用 Vue Webpack 模板构建 Vue.js 应用程序。在组件内，我正在初始化 Datatable像这样:

<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');
                }
            }