How to connect a datatable in vue.js?

1. Via the official way to plug in failed:
5e96cddce61d4053147596.png
Put this code in src/main.js. The result:
5e96cfb406570871028530.png
The error is clear, but how to use a variable from main.js in someComponent.vue is not clear.

2. Googled this:
import $ from 'jquery';
 import dt from 'datatables.net-bs4';
 $.fn.DataTable = dt;

 export default {
...
 $('#myTable').DataTable({ });
...
 }

Helped, but there was another problem. The table displays in the Show.vue, which serves the route:
info/history/:type (type: current, closed). In the transition from current to closed changed route in the browser, but the table is not redrawn without the watch for $route:
watch: {
 $route() {
this.loadInfo();
}
 },

And in this case the DataTable starts to complain that it can not re-create the table:
5e96d503906c6430592891.png

Tried to solve via the built-in DataTable in methods clear remove / destory:
if(this.dataTable !== undefined) {
 this.dataTable.destroy(); // Remove the old table before creating a new
 }

But DataTable says cannot find method destroy:
5e96d5bd397e0328688491.png

The complete code looks like this:
the <script>
 import $ from 'jquery';
 import dt from 'datatables.net-bs4';
 $.fn.DataTable = dt;

 export default {
store
 data() {
 return {
 dataTable: undefined
 table: [],
}
},

 watch: {
/* To load new data from server when moving from type = current type = "closed" and back */
 $route() {
this.loadInfo();
}
},
 methods: {
 async loadInfo() {
 /* Got data from DB */
 await axios.get('/api/data/' + this.$route.params.type + '?page=' + this.$route.query.page)
 .then(({data}) => {
 this.table = data.infoFromDb;
});

/* According to documentation it should remove the old table */
 if(this.dataTable !== undefined) {
this.dataTable.destroy();
}

/* Apply DataTable*/
 this.dataTable = $('#myTable').DataTable({ });
}
},
 mounted() {
this.loadInfo();
},
}
</script>


Total:
1. Might incorrectly connect a datatable...
2. Maybe instead of the watch -> $route, is there another way to get vue to redraw a component with 0, then the error "Uncaught (in promise) TypeError: _this.dataTable.destroy" simply does not arise.
3. Convenient counterparts dataTable not found.
What would you recommend?
April 19th 20 at 12:06
2 answers
April 19th 20 at 12:08
Why datatables? Is there a better solution without having to include jQuery. vue-tables-2, vuetable-2
Thank you. I'll try. - elisha53 commented on April 19th 20 at 12:11
April 19th 20 at 12:10
And so tried?
...
var
that = this;
....
$('#myTable').DataTable().destroy();
....
this.$nextTick(function(){
that.table = $('#myTable').DataTable({
});
....
Thanks for the reply. I tried, but unfortunately didn't work. The result is the same.
I tried to save:
- In var that = this...
Just a variable in the var table, not data() { ... }
And just call $('#myTable').DataTable().destroy();
5e9838ca9a3f6799212765.png - elisha53 commented on April 19th 20 at 12:13

Find more questions by tags Vue.jsJavaScript