Chartjs-Vuejs prop does not get updated

by

0👍

From Vue docs

An important note about the ref registration timing: because the refs
themselves are created as a result of the render function, you cannot
access them on the initial render – they don’t exist yet! $refs is
also non-reactive, therefore you should not attempt to use it in
templates for data-binding.

So that explains pretty much the entire behaviour. If you are binding $this.linechart it will pass undefined at first render because the ref doesn’t exist yet. If you are binding $refs you pass a reference to $refs object which latter is updated in a non-reactive way.

I can think only of one solution. Render the options component only after the parent has been rendered, to have $refs object populated, and don’t count on its reactivity. Like:

  <options
    v-if="rendered"
    :chart="$refs.linechart"
    :resolution="lineResolution"
    :maxTicksLimit="lineMaxTicksLimit"
  ></options>

data(){
    rendered: false
},
mounted() {
    this.$nextTick(() => this.rendered = true)
}

Leave a comment