Uncaught (in promise) TypeError: Cannot read property '__eventTarget' of null

[timchu90]

Hello,

We are Vue newbies using Vue 2.1.0 and vue-charts 0.2.1.

In one of our components we have a table element, whose rows we want to be click-able:

<vue-chart chart-type="Table" :chart-events="chartEvents"

There's a particular path through our application that results in an error being thrown:

Uncaught (in promise) TypeError: Cannot read property '__eventTarget' of null

It seems like it happens when this vue chart is called second, after another chart is called first. If this chart is called first before any others have been called, it works fine. If the chart is called third or any subsequent calls, it works fine as well.

In our particular scenario, the first chart being called when the error occurs is a LineChart.

We're having a hard time debugging it because vue-charts is a bit of a black box to us and because we don't know what information to log to the console that could illuminate what's happening. If we delete the line:

:chart-events="chartEvents"

the issue goes away. So it's likely an issues with the eventBinding on the chart. Is it possible your previous bug-fix for this issue didn't fix it completely?

Thanks!

[rzb]

I'm having the same problem and I have only 1 chart being rendered.

Can you show what you have inside chartEvents? Also, are you using material chart version?

[timchu90]

Our chart event looked like this and only had a problem displaying when self.branch == "gene".

              chartEvents: {
                    'select': function() {
                        var selection = self.$refs.thisTable.chart.getSelection();
                        if (self.branch == "gene") {
                            for (var c in self.cancerDict){
                                if (self.cancerDict[c].name == self.rows[selection[0].row][0]){
                                    self.$store.commit(
                                        'setSelectedCancer',
                                        {id: self.cancerDict[c].id.toString(), name: self.cancerDict[c].name}
                                    );
                                    break;
                                }
                            }
                        }
                        else {
                            self.$store.commit('setSelectedGene', {
                                name: self.rows[selection[0].row][1],
                            });
                        }
                    }  
                },

In the end our (admittedly stupid) fix was to make a hidden empty table somewhere at the start of the page loading and it worked great after that.