Vue-chartjs: A Gotcha on component creation.

[treaves]

I am just integrating this into a project. I've created a component copy-pasted from 'How to use' section, the Bar chart. When I then used that component, it blew up with an error:

Cannot read property 'getContext' of undefined

This puzzled me. :) The issue is that in my Vue component, I had an (empty) template tag, as I just automatically do that to every new .vue file. Removing the template tag resoled the issue.

I did not see any reference to forbidding the empty template tag. I thought perhaps it'd be worth mentioning.

Thanks.

[apertureless]

Well, it makes sense if you think about it.

You are creating a component:

// CommitChart.js
import { Bar } from 'vue-chartjs'

export default Bar.extend({
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(data, options)
  }
})

But, you are extending the base chart component. Which is for example this one: https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts/Bar.js

Now in your commitchart.js or in your case your commitchart.vue you have access to all data models and all props and all methods, which are defined in the base chart.

You can access the defaultOptions the chartId or width props etc. Thats why you can call the renderChart() method in your mounted() hook.

And you can create new props and data models in your commit chart component and add custom logic to it.

---

However, if you create a template tag in your component, Vue will take this template tag as your component template. And because you cant "extend" templates it will replace the one defined in the base chart. If you would place a h1 tag in your component template tag, you would only get a h1. Because vue can't know how to merge your template with the template in the base charts. Thats why it will replace the template.

And if you have an empty template tag in your component it will replace the whole canvas and template defined in the base chart, with... nothing ... and you lose the this.$refs.canvas

:)

[treaves]

Well, that 'thinking' part always gets me!

I'm new to JavaScript, and am still learning. It does make sense once one understand what you so clearly explained.

Thanks so much.

[apertureless]

You're welcome :)

[dapobelieve]

Lovely explanation, just got saved from this too

[uoon-dev]

Thanks for your nice explanation :)
In this respect, can I understand vue has a little disadvantage? (disable merging template)

[apertureless]

Well its not really a disadvantage.
In nearly all cases you don't need the template part in your component.
Because if you extend it, you will get the predefined template with the canvas and all you need, to run chartjs.

In the very rare cases where you do need to change the template of the div + canvas, you still can. You just need to make sure that the ref is set correctly on the canvas element so the component still works.

And merging templates generally does not make much sense if you think about it. In which cases would you want to merge the template part of two components ?