Question

我在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;
    })

Answer 1

您是否在代码中尝试过v-on:click。您可以显示vue js代码吗？

Answer 2

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

公共函数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();
}

Answer 3

我遇到了同样的问题，我不想重新启动以使用 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>

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

3 个答案: