laravel - 数据表ajax渲染中的按钮单击在Vue中不起作用

Question

我是 Vuejs 的新手。

我有一个用户表，它使用 Datatable 中的服务器端处理显示数据。我正在尝试添加一个单击事件，它将调用一个 vue 函数。但是点击功能根本不起作用。我尝试使用这些方法。但他们都没有工作。

v-on:click="函数名"

v-on:click="$emit('functionName')"

@click="函数名"

HTML 部分

<table class="table table-bordered data-table dataTable-load">
   <thead class="thead-light">
      <tr>
         <th style="width: 80px;">No</th>
         <th>Name</th>
         <th>Email</th>
         <th>Phone</th>
         <th>Type</th>
         <th>Created</th>
         <th>Last Updated</th>
         <th width="280px">Action</th>
      </tr>
   </thead>
   <tbody></tbody>
</table>
<div>
  <span v-html='data'></span>
</div>

脚本部分

 var dt = $('.dataTable-load').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
         url: "{{ url('user/getdata') }}",
         type: "post",
         data: {"_token": "{{ csrf_token() }}"}
      },
      columns: [
         {name: 'id', data: 'id', },
         {name: 'name', data: 'name'},
         {name: 'email', data: 'email'},
         {name: 'phone', data: 'phone'},
         {name: 'usertype', data: 'usertype',
            "render": function (data, type, row) {
               if (row.usertype == 'M') {
                  return 'Manager';
               } else {
                  return 'Staff';
               }
            }
         },
         {name: 'created_at', data: 'created_at'},
         {name: 'updated_at', data: 'updated_at'},
         {
            title: 'msg',
            "render": function (data, type, row) {
               return '<button v-on:click="showModal" @click="showModal">the button</button>';
            }
         }
      ]
   });
   dt.on('order.dt search.dt', function () {
      dt.column(0, {search: 'applied', order: 'applied'}).nodes().each(function (cell, i) {
         cell.innerHTML = i + 1;
      });
   }).draw();

应用程序.js

const app = new Vue({
   el: '#app',
   data: {
      data: '',
   }, 
   methods: {
      showModal() {
         this.data = 'Now click on me <a href=\'#\' @click.prevent=\'alert("yo")\'> here </a>';
      },
   },
});

请让我知道如何正确地做到这一点。提前谢谢你。

标签： laraveldatatablevuejs2