[Vuejs]-Highcharts chart didn't redraw after vue data changed

by

0👍

✅

The problem is your config watcher only watch the change of config not its nested properties so this.config.series = [...] won’t trigger your watcher.

First solution, use deep option:

watch: {
  config: {
    handler() {
      this.render()
    },
    deep: true
  }
}

Demo

Second solution, use spread syntax to assign the whole object:

this.config = {
  ...this.config,
  series: [{ /* */ }]
}

Demo

0👍

Here is the solution for you:

  1. Destruct the config object in render method to lose a reference:

    render() {              
    this.chart = Highcharts.chart('container', {...this.config});
}

  2. Change your config watcher to deep (that way watcher will react when you are changing property that belongs to the object e.g. this.config.series = [...]):

    config: {
    deep: true,
    handler() {
        this.render();
    }
}

Leave a comment