[Vuejs]-Destroying and re-rendering DataTable using html table populated by VueJS

by

0👍

✅

Vue might be competing for DOM elements here with DataTable.

If you use $('my-table').DataTable() it references the table by the DOM position.

When working with Vue, it’s better to use $ref to reference an element.

Vue does some magic in the background that allows only object that changed to re-render. So it seems like when you’re destroying and creating a new object, Vue doesn’t have a way to know that it changed, and doesn’t re-render it.

there’s a few ways you might for you.

  • use a key for the DataTable element. When there’s a change update the key, which will redraw the element
  • you can try this.$forceUpdate(); at the end of the function
  • you can also try this.$nextTick().then(()=>$('my-table').DataTable())

Leave a comment