gearcoded
commented
2 years ago @islarky88, If you create a new Gantt instance when you open a tab/view/page with Gantt, then Gantt creates a new Gantt instance with the default (or specified) configuration. Usually, that is enough to reset all settings. In that case, calling the destructor method should guarantee that no previous DOM elements and configuration should remain when you return back to that tab/view/page.
If you don't create a new Gantt instance when you open a tab/view/page with Gantt, the Gantt object remains. So, when you navigate to other tab, then return back, the code for Gantt will be called twice. It means that the same data will be loaded twice, and all the event handlers will also fire twice. In that case, you will need to manually reset the Gantt configuration by yourself: https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html Unfortunately, I don't have a Vue.js demo for both approaches.
Also, Gantt doesn't have a built-in garbage collector.
If you navigate to another tab, the destructor method is not called. Vue.js only removes the DOM elements and changes the scope. After you call the destructor method, you can no longer use Gantt until you reload the page or create a new Gantt instance.
You can experiment with that in the following snippet: https://snippet.dhtmlx.com/ymn0o7po
When the (vue) component which has the dhtmlx gantt is destroyed, is it necessary to do gantt.destructor() on the beforeDestroy() lifecycle hook?
Does the gantt have it's own garbage collection? As far as i know, if dhtmlx gantt is out of dom, destructor() is called anyway.