DHTMLganttChart.vue

<template>
  <div class="dhtml-gantt-chart">
    {{word}}
    <div id="gantt_here" ref="dhtml" style="width:100%; height:400px;"></div>
  </div>
</template>

<script>
//Component's location: src/components/charts/DHTMLganttChart.vue
//Library's location: src/assets/dhtmlgantt-v4-pro/

require('../../assets/dhtmlgantt-v4-pro/dhtmlxgantt.css');
require('../../assets/dhtmlgantt-v4-pro/dhtmlxgantt_material.css');

require('../../assets/dhtmlgantt-v4-pro/lib-dhtmlxgantt.js');
require('../../assets/dhtmlgantt-v4-pro/dhtmlxgantt_critical_path.js');
require('../../assets/dhtmlgantt-v4-pro/dhtmlxgantt-locale.js');
require('../../assets/dhtmlgantt-v4-pro/lib-dhtmlxgantt_marker.js');
require('../../assets/dhtmlgantt-v4-pro/lib-dhtmlxgantt_tooltip.js');

import { mapState, mapActions } from "vuex";
import { stringify } from 'querystring';

/*
 * Test DHTMLX Gantt Chart: https://docs.dhtmlx.com/gantt/samples/
 */

export default {
  name: "dhtml-gantt-chart",
  props: {
    ready: {
      type: Boolean,
      default: false,
      required: true //must be provided for refreshing
    }
  },
  data() {
    return {
      ganttChart: {},
      word: "DHTMLX Gantt Chart should be here", //<----- OK
      tasks:{
          data:[
            {id:1, text:"Project #2", start_date:"01-04-2013", duration:18,order:10,progress:0.4, open: true},
            {id:2, text:"Task #1", 	 start_date:"02-04-2013", duration:8, order:10,progress:0.6, parent:1},
            {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8, order:20,progress:0.6, parent:1}
          ],
          links:[
            { id:1, source:1, target:2, type:"1"},
            { id:2, source:2, target:3, type:"0"}
          ]
        }
    }
  },

  mounted() {
    console.log("DHTML Gantt Chart: mounted()------------------"); 
    let self = this;
    self.ganttChart = Gantt.getGanttInstance(); 
    self.ganttChart.init(self.$refs.dhtml);
    self.ganttChart.parse(self.tasks);
    self.ganttChart.refreshData();
  }
};
</script>


<style>
  @import '../../assets/dhtmlgantt-v4-pro/dhtmlxgantt.css';
  @import '../../assets/dhtmlgantt-v4-pro/dhtmlxgantt_material.css';
</style>