如何使用gantt.destructor（）？

Question

我将DHTMLX GANTT与Vue一起使用。

当创建甘特图时，我切换到另一个页面并返回，并非所有功能都可用。

在dhtmlx论坛中，他们提供了以下链接：https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html

但是方法const ganttChart=Gantt.getGanttInstance（）；没有定义，如果我尝试在我的应用程序中做同样的事情。

有没有办法彻底销毁vue中的组件？我用v-if、key、forceUpdate（）进行了尝试，但没有成功。DOM中仍然存在一些甘特图组件。当我刷新页面时，它可以工作。

有没有其他方法可以破坏他从头开始渲染的组件？

Answer 1

甘特图对象仅存在于试用版、企业版和最终版中。

要销毁甘特图实例，可以调用甘特图。析构函数方法：

https://docs.dhtmlx.com/gantt/api__gantt_destructor.html

它适用于所有甘特图版本。该方法应该会破坏甘特图容器，但它的调整大小监视程序仍然存在：

http://prnt.sc/vkwmdw

销毁甘特图后，在重新加载页面或创建新的甘特图实例之前，您无法再次使用它。

Answer 2

gantt.destructor函数在Vue中也给我带来了一些问题。

我在销毁Vue生命周期之前更改甘特图引用并分离初始化期间附加的事件，解决了这个问题，如下所示：

<div class="gantt" :id="ganttId"></div>

mounted () {
   this.ganttId = 'gantt-' + this.createUUID()
   this.initializeGannt()
}

beforeDestroy() {
    gantt.detachEvent("onTaskClick");
    gantt.detachEvent("onAfterTaskUpdate");
}

methods {
    initializeGannt () {
        ...
        gantt.attachEvent("onTaskClick", (id, e) => {
          ...
        }, {id: "onTaskClick"});

        gantt.attachEvent("onAfterTaskUpdate", (id, e) => {
          ...
        }, {id: "onAfterTaskUpdate"});
        ...
    }

}