haw i can adapt dhtmlxGantt display screen with my component? - css

Question

i use dhtmlxGantt because i need gantt diagram in my project but i have a desplay problem . i use vuejs component that's why i put the code of dhtmlxGantt in my component but the display isn't clear
this is my code :
//Gantt component
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div id="gantt_here">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created(){
gantt.init("gantt_here");
},
mounted() {
console.log('Component mounted.')
}
}
</script>
<style scoped>
body{
margin: 10px ;
}
</style>
and i call this two file
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
please i need help

Answer 1

VueJS is very complicated when it comes to javascript components external to the components, what I can advise you in this case is to do the internal import of the component's library and try to use it, as I never used this component, so I don't know if it uses jQuery, but there are ways to use jQuery in VueJS.
An example of how you would use it would be installing the library using the command npm install --save #types/dhtmlxgantt, and importing it into your component.
<script>
import gantt from '#types/dhtmlxgantt'
export default {
...
created() {
gantt.init("gantt_here");
}
}
</script>