[Vuejs]-VueJS Jquery Datatable Integration: Attach method to dynamic html element

by

-1👍

✅

Have you ever tried building your table using Vue v-for directive for rendering the rows and then just invoking DataTable method on the resulting table?

That would be:

  1. Build your table and rows as you would normally do by using Vue components.
  2. Create a “DataTable” from it like so: $('#example').DataTable();

Take a look at this modified version I made from yours:

https://codepen.io/feload/pen/PJKoJP?editors=1010

Good luck!

👤Felipe

0👍

The idea behind a wrapper component is to separate the parts of the DOM that Vue gets to control from those that something else will control. Inside the data-table component, jQuery is in control of the DOM. Handle your events accordingly:

$(this.$el).on('click button', (event) => {
  this.buttonPressed();
});
👤Roy J

Leave a comment