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

您可以在数据表回调中添加click事件。希望这会有所帮助

      mounted() {
                $('#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');
                }
            }

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

1 个答案: