如何在vuejs中为dataTable呈现带有点击事件的编辑按钮

Question

I am trying to render dynamic buttons for dataTable rows in vuejs . Buttons are displaying for each row, but the problem is, @click event is not working there. My codes are:

$('#users').DataTable({
    data: response.data,
    columns: [
         { data: 'id' },
         { data: 'role_id' },
         { data: 'name' },
         { data: 'email' },
         {
            data: null,
            className: "dt-center editor-edit",
            render: function (data, type, row, meta) {
                 return '<input type="button"'+ @click=toggleModal()+'" class="name" id=n-"' + 
                 meta.row + '" value="Name"/>;
            },
            orderable: false
          }
     ]
})

Answer 1

Please try this, with just hardcode @click="toggleModal()" with the string.

<input type="button" @click="toggleModal()" class="name" id=n-"' + 
             meta.row + '" value="Name"/>