通过 onclick 原生方法 VueJs 监听事件点击

Posted 2023-02-23

【中文标题】通过 onclick 原生方法 VueJs 监听事件点击

【英文标题】：Listen to event click through the onclick native method VueJs

【发布时间】：2018-09-10 16:55:51

【问题描述】：

通过onclick原生方法监听事件点击

我正在使用 laravel 备份一侧的以下包 laravel-datatables，据我所知，无法渲染传单组件，因此我尝试手动单击事件侦听器

我从后端返回一个带有两个按钮的操作列

Route::get('/users', function()
    $model = App\User::query();
    return DataTables::eloquent($model)
                ->addColumn('action', function()
                    return '<a  onclick="return clickRow(this)"  class="btn btn-dark btn-sm ">
                                <span class="fa fa-edit"></span>
                            </a>
                            <a href="#"   class="btn btn-danger btn-sm">
                                <span class="fa fa-remove"></span>
                            </a>';
                )
                ->rawColumns(['action'])
                ->make(true);
)->name('users');

据观察，我在 html 中有一个 onclick 事件，我想知道是否可以从我的 VueJS 组件中监听

methods :
    clickRow(event)
        console.log(event);
    ,
....

按钮的代码是使用我在前面jquery datatables中提到的包从laravel备份中返回的，所以听众可以听的唯一方法就是我想象的那样。

它目前告诉我 clickRow 函数没有定义。有没有办法做到这一点？如果我在概念上弄错了，也很高兴知道。

【参考方案1】：

尝试添加一个常规的 Vue 事件监听器。

代替：

onclick="return clickRow(this)"

执行以下两项之一：

如果你想阻止a的默认行为：

@click.prevent="clickRow"

如果你只想处理点击事件：

@click="clickRow"

例子：

                return '<a @click.prevent="clickRow" class="btn btn-dark btn-sm ">
                            <span class="fa fa-edit"></span>
                        </a>
                        <a href="#"   class="btn btn-danger btn-sm">
                            <span class="fa fa-remove"></span>
                        </a>';

【讨论】：

我尝试了所有的选项，但显然包只添加了字符串@click.prevent，但没有添加适当的渲染来响应事件

按钮的代码是使用我在前面jquery数据表中提到的包从laravel备份中返回的，所以听众可以听的唯一方法就是我想象的那样。

嗯.. 所以我认为它没有被管理。您必须使用 onclick="return clickRow(this)" 并在全局范围内声明 function clickRow(...) 。

是的，直到现在这是我唯一的可能性，但我不清楚它会怎么做，因为当我点击按钮时，我得到所有数据来在 vue 中设置一些值组件实例

您可以像window.app = new Vue(... 一样访问声明它的实例，然后使用app 访问它的值。