Giter Club home page Giter Club logo

Comments (5)

neuronetio avatar neuronetio commented on May 18, 2024

You can listen chart events on main gantt-elastic component
https://github.com/neuronetio/gantt-elastic/wiki/Mouse-&-touch-events

<gantt-elastic 
    @chart-project-click="doSomething"
    @chart-task-mouseover="showYourTolltip" 
    @chart-task-mousemove="moveYourTooltip" 
    @chart-task-mouseout="hideYourTooltip" 
 ... >

from gantt-elastic.

Mak-NOAA avatar Mak-NOAA commented on May 18, 2024

Thank you @neuronetio checking it out, will close this if there's no further questions.

from gantt-elastic.

Mak-NOAA avatar Mak-NOAA commented on May 18, 2024

@neuronetio I'm new to TS myself so please bare with me.....so I am starting with the project click and it's not recognizing my function.

My main component is

    <gantt-elastic :tasks="tasks" :options="options"
    @chart-project-click="onTaskClick" 
    ></gantt-elastic>

then in the same TS snippet, I have declared:

function onTaskClick(event:any, data:any) {
  console.log("fsafaf");
}

However I'm getting the following error:

vue.runtime.esm.js?63f0:619 [Vue warn]: Property or method "onTaskClick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BaseIterator> at src/views/Chart.vue
       <QPageContainer>
         <QLayout>
           <LayoutDefault> at src/layouts/Default.vue
             <App> at src/App.vue
               <Root>
warn @ vue.runtime.esm.js?63f0:619
warnNonPresent @ vue.runtime.esm.js?63f0:2015
get @ vue.runtime.esm.js?63f0:2070
render @ Chart.vue?fb8a:11
Vue._render @ vue.runtime.esm.js?63f0:3542
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
createChildren @ vue.runtime.esm.js?63f0:6030
createElm @ vue.runtime.esm.js?63f0:5931
patch @ vue.runtime.esm.js?63f0:6454
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
init @ vue.runtime.esm.js?63f0:3118
createComponent @ vue.runtime.esm.js?63f0:5955
createElm @ vue.runtime.esm.js?63f0:5902
patch @ vue.runtime.esm.js?63f0:6493
Vue._update @ vue.runtime.esm.js?63f0:3927
updateComponent @ vue.runtime.esm.js?63f0:4048
get @ vue.runtime.esm.js?63f0:4456
Watcher @ vue.runtime.esm.js?63f0:4445
mountComponent @ vue.runtime.esm.js?63f0:4055
Vue.$mount @ vue.runtime.esm.js?63f0:8391
(anonymous) @ main.ts?cd49:54
./src/main.ts @ app.js:6199
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:6367
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?63f0:619 [Vue warn]: Invalid handler for event "chart-project-click": got undefined

found in

---> <GanttElastic> at node_modules/gantt-elastic/src/GanttElastic.vue
       <QPage>
         <BaseIterator> at src/views/Chart.vue
           <QPageContainer>
             <QLayout>
               <LayoutDefault> at src/layouts/Default.vue
                 <App> at src/App.vue
                   <Root>

from gantt-elastic.

neuronetio avatar neuronetio commented on May 18, 2024

I don't know ts either

from gantt-elastic.

neuronetio avatar neuronetio commented on May 18, 2024

In js you must add this function to component methods

from gantt-elastic.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.