通过onclick本机方法VueJs收听事件点击

时间:2018-04-01 04:54:15

标签: javascript laravel vuejs2 vue-component

通过onclick原生方法

收听事件点击

我使用laravel备份一侧使用以下软件包laravel-datatables,我理解是无法呈现传单组件,因此我尝试手动点击事件监听器< / p>

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

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数据表中提到的包,使用laravel从备份中返回按钮的代码,因此侦听器可以监听的唯一方式就是我想象的那样。

它目前告诉我没有定义clickRow函数。有没有办法做到这一点?如果我在概念上犯了错误,那么知道它也会很棒。

1 个答案:

答案 0 :(得分:2)

尝试添加常规Vue事件侦听器。

而不是:

fetch(url)
.then((resp) => resp.text())
.then(function (data) { 
    //get the text of the webpage by 
    //mimicking Beautiful Soup's get_text() function        
})

执行以下两项中的一项:

  • 如果您想阻止onclick="return clickRow(this)" 的默认行为:

    a
  • 如果您只想处理点击事件:

    @click.prevent="clickRow"
    

示例:

@click="clickRow"