带有自定义按钮的 Yajra 数据表答案

【问题标题】：Yajra Datatables with custom buttons带有自定义按钮的 Yajra 数据表
【发布时间】：2020-09-04 12:50:52
【问题描述】：

我在 Laravel 项目中使用带有服务器端渲染的 Yajra 数据表。但我想在具有 Vue @click 功能的列中添加一些自定义按钮。我正在尝试像这样添加，但单击它不起作用。

      ->addColumn('action', function($user){
        $btn = '<a @click="delete_user('.$user->id.')"><i class="fa fa-times font-20 deleteUser"></i></a>';
       
        return $btn;
    })

【问题讨论】：

标签： laravel vue.js yajra-datatable

【解决方案1】：

您是否在代码中尝试过v-on:click。能否请您显示vue js代码。

【讨论】：

【解决方案2】：

我也遇到过同样的问题，我不想重新启动以轻松使用 Yajra 或 Vue 的强大功能。我已经通过直接从 Vue 实例化对象调用函数来修复它。

<button id="btn_entrada_edit" class="btn btn-sm dropdown-item text-primary" onclick="modal_edit_entrada.edit_entrada(' . $entrada->id . ')" ><i class="fas fa-edit"></i> Editar</button>

【讨论】：

【解决方案3】：

这是在我的控制器上，其他 js 功能（例如复制密码和以用户身份登录）工作正常。唯一不工作的是 Vue 点击：

public function getBasicData()
    {

        $user=User::all();
        return Datatables::of(User::query())
            ->addIndexColumn()
            ->addColumn('view_user', function($user){
                $btn =
                    '<a href="http://account.com/admin/client/'.$user->id.'">'.$user->name.'</a>';
                return $btn;
            })

            ->addColumn('action', function($user){

                if(Cache::has('user-is-online-' . $user->id))
                    $btn3='<i class="fa fa-circle font-16 onlineStatus online"></i>';
                else $btn3 ='<i class="far fa-circle font-16 onlineStatus offline"></i>';

                $btn1 = '<a v-on:click="delete_user('.$user->id.')"><i class="fa fa-times font-20 deleteUser"></i></a>';
                $btn2 = '<a href="http://account.com/login_user/'.$user->id.'"><i class="fa fa-user font-20"></i></a><input id="myInput'.$user->id.'" class="copyPassInput" value="'.$user->real_password.'"><i onclick="myFunction('.$user->id.')" title="'.$user->real_password.'" class="fa fa-eye  font-20 copyPassIcon"></i>';
                $btn4='<div class="d-flex">'.$btn2.' '.$btn1.' '.$btn3.'</div>';


                return $btn4;
            })

            ->rawColumns(['view_user','action'])
            ->make();
    }

【讨论】：