在Vuejs app上重绘Highcharts

Question

I'm building a little pension calculator where I want to show the value of the pension pot depending on the users current and retirement age.

I'm looking to take the user's data, number fields bound to a Vue model and then computing the value of the pot based on that data.

That works just fine but having an issue with not being able to have Highcharts redraw the chart when the models change.

The redrawChart method fires but the chart stays the same with the console telling me Chart.redraw is not a function .

Redraw is an option for the Highcharts API so not sure where I'm failing.

Here's the markup:

<div id="app">
 <input type="number" min="55" v-model.number="age"  v-on:change="redrawChart">{{ age }}
 <br>
<input type="number" min="1" max="1000000" v-model.number="currentPensionValue" v-on:change="redrawChart">{{ currentPensionValue }}
<br>
<input type="number" min="56" v-model.number="retireAge"  v-on:change="redrawChart">{{ retireAge }}
<br>

<Chart :data="data" :steven="steven" :age-pot-value="agePotValue"></Chart>

and the associated Vue code

const Chart = Vue.component('Chart', {
    props: ['data', 'steven', 'agePotValue'],
    template: `
    <div>
        <p>{{ data }}</p>

        <h1>{{ steven }}</h1>
        <h1>{{ agePotValue }}</h1>
        <div id="thechart"></div>
    </div>
    `,
    mounted() {
        var highchartsOptions = {
            chart: {
                type: 'area',
                renderTo: 'thechart'
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            title: {
                text: ''
            },
            xAxis: {
                allowDecimals: false,
                title: {
                    text: 'Age'
                }
            },
            yAxis: {
                title: {
                  text: 'Pot Value'
                },
                labels: {
                    formatter: function () {
                    return '£' + this.value / 1000 + 'k';
                  }
                },
                opposite: true,
            },
            plotOptions: {},
            series: [{
            name: '',
            data: this.agePotValue
        }],
            credits: false
        }
            Highcharts.chart(highchartsOptions)
    }
});

new Vue({
    el: '#app',
    data: {
        age: 55,
        currentPensionValue: 22000,
        retireAge: 87
    },
    computed: {
        data() { return (this.currentPensionValue) / (this.retireAge - this.age) },
        steven() { return this.data * 1.4 },
        agePotValue() {
      var vm = this;
      var agePotValue = [[vm.age, (vm.data)], [vm.retireAge, vm.currentPensionValue]];

      return agePotValue;
    }
    },
    components: { Chart },
    methods: {
        redrawChart() {
      Chart.redraw();
        }
    }
})

Here's the the fiddle https://jsfiddle.net/stevieg_83/naLqzunz/11/

Any help appreciated.

Answer 1

Please see this working fiddle

https://jsfiddle.net/naLqzunz/12/

I make a little change on your approach, component will be watching for changes

  watch:{
    data(){this.redraw()},
    steven(){this.redraw()},
    agePotValue(){this.redraw()},
  },

and redraws method just update chart data (that fires redraw automatically)

  methods:{
    redraw(){
        this.chart.series[0].setData(this.agePotValue,true);
    }
  },