CODEWITHSUNDEEP
javascriptlaravelvuejs2vue-component
DarkFenix
DarkFenix

Reputation: 746

Listen to event click through the onclick native method VueJs

Listen to event click through the onclick native method

I'm using the following package laravel-datatables from the side of the backup with laravel, which I understand is that it is not possible to render flyer components so I try to make the event listener click manually

From the backend I return an action column with two buttons

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

As it is observed I have an onclick event in the html which I want to know if it is possible to listen from my components of VueJS

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

The code of the buttons is returned from the backup with laravel using the package that I mentioned in the front jquery datatables, so the only way listeners can listen is how I imagined it.

it is currently telling me that the clickRow function is not defined. Is there any way to do this? If I'm mistaken in concepts it would also be great to know.

Upvotes: 1

Views: 1047

Answers (1)

acdcjunior
acdcjunior

Reputation: 135832

Try adding a regular Vue event listener.

Instead of:

onclick="return clickRow(this)"

Do one of the two below:

  • If you want to prevent the default behavior of a:

    @click.prevent="clickRow"

  • If you just want to handle the click event:

    @click="clickRow"

Example:

                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>';

Upvotes: 3

Related Questions