CODEWITHSUNDEEP
vue.jschartsvue-chartjs
Alex T
Alex T

Reputation: 3754

Chart JS not reacting to change in computed property

I have computed property:

computed: {
    drilldownData() {
        if (this.toggle_drill === "up") {
            return this.waterfallDataSmall
        } else {
            return this.waterfallData
        }
    }
}

And the toggle_drill is model variable connected to button-toggle component:

<v-btn-toggle v-model="toggle_drill">

When I toggle it the toggle_drill will change value from up to down and back without a problem.

However you can see in the reproduced example here: Codesandbox

That the chart only updates once and thats it. It should be updating as the toggle_drill is updating which this computed property indicates. It seems to be crashing after initial update but i have no idea why.

Upvotes: 0

Views: 276

Answers (1)

Cray
Cray

Reputation: 2850

chart.js changes the chart data object and the original waterfallDataSmall gets overwritten after first change.

A simple fix is passing a cloned object.

drilldownData() {
  if (this.toggle_drill === "up") {
    return JSON.parse(JSON.stringify(this.waterfallDataSmall));
  } else {
    return this.waterfallData;
  }
}

Upvotes: 2

Related Questions