在来自 jquery 的动态创建的内容上绑定 Vue 点击功能

Question

首先，我是 vuejs 的新手，目前正在开发一个使用 Laravel 制作的项目。我会在我觉得需要它的地方使用 Vue。在某个页面上，我正在使用数据表加载机器请求列表

$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);

我添加了一个点击功能，以便在渲染数据表时，可以调用一个Vue函数。在 blade 模板中，我使用以下 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 blade 一起使用的方式。我只是想知道为什么上面的代码在应该的时候不起作用。谢谢

Answer 1

我认为您不能像这样使用动态呈现的内容创建绑定。问题是首先创建 vue 应用程序，然后呈现具有 @click 绑定的内容。

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

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

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

在来自 jquery 的动态创建的内容上绑定 Vue 点击功能

Bind Vue click function on dynamically created content from jquery

laravel

vuejs2

blade