Question

首先，我是vuejs的新手，目前正致力于使用Laravel制作的项目。我正在使用Vue，我觉得有必要。在某个页面上，我使用datatable来加载机器请求列表

$list = LicenceRequests::orderBy('allocated')->with('users.userDetails')->where('users_id', '!=', 1)->get();
    return Datatables::of($list)
      ->addColumn('actions', function ($list) {
          return '<button data-id="'.$list->id.'" class="btn btn-success" @click="allocateEvent">Allocate</button>';
      })
      ->addIndexColumn()
      ->rawColumns(['actions'])
      ->make(true);

我添加了一个click函数，以便在渲染数据表时，可以调用Vue函数。在刀片模板中，我使用以下html代码：

  <div id="content" class="content">
    <div class="block">
        <div class="block-content">

            <table class="table table-bordered table-striped " id="requestList">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th class="hidden-xs" >Name</th>
                        <th class="hidden-xs" >Email</th>
                        <th class="hidden-xs" >Requests</th>
                        <th class="hidden-xs" >Allocated</th>
                        <th class="hidden-xs" >Date requested</th>
                        <th class="hidden-xs" >Machine address</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>?

对于数据表，我在页面加载函数上调用它，如下所示：

$(function (){
$('#requestList').dataTable({
    processing: false,
    serverSide: true,
    ajax: '{!! route('admin.getLicenceRequests') !!}',
    columns: [
    {data: 'DT_Row_Index', orderable: false, searchable: false},
    { data: 'users.user_details.name', name: 'name' },
    { data: 'users.email', name: 'email' },
    { data: 'number', name: 'number' },
    { data: 'allocated', name: 'allocated' },
    { data: 'request_generated_on', name: 'request_generated_on' },
    { data: 'machine_address', name: 'machine_address' },
    { data: 'actions', name: 'actions',orderable: false, searchable: false }

    ],
    lengthMenu: [[ 10, 15, 20], [ 10, 15, 20]]
});

}）;

我正在同一页面上初始化Vue

var vm = new Vue({
el: '#content',
methods: {
    allocateEvent: function() {
        console.log("hello");
    }
}

}）

问题是当我按下数据表的渲染html上的按钮时，不会调用该函数。如果我将函数绑定到页面上的任何一个元素，它将起作用。是否有我遗漏的东西或一些我没有添加的Vue相关代码？

P.S我知道这不是Vue应该如何与laravel刀片一起使用。我只是想知道为什么上面的代码不能正常工作。感谢

Answer 1

我认为你不能像这样用动态渲染的内容创建绑定。问题是首先创建了vue应用程序，之后呈现了带有@click绑定的内容。

以下是Evan Yu关于动态内容的评论：

https://forum-archive.vuejs.org/topic/151/vue-js-not-listening-to-dynamically-created-elements

建议在处理动态内容时使用$compile(html)和appendChild。

绑定Vue单击来自jquery的动态创建内容的函数

1 个答案: