Vuejs Data Update

Question

I am trying to update highcharts data from a vuex-store, but the issue is that when the click event is triggered, the data in the vuex store state is mutated, but it only reflects in my highcharts component when i make some changes to the code and save the changes.

I am working on a dashboard using Vue and Highcharts.

<template>
  <div>
    <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
    <v-btn>{{parts}}</v-btn>
  </div>
</template>

<script>
import VueHighcharts from 'vue2-highcharts';
import Vue from 'vue';

export default {

  components: {
    VueHighcharts,

  },
  data() {
    return {

      options: {
        chart: {
          type: 'spline',
          title: 'Hassaan',
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        yAxis: {
          title: {
            text: '',
          },
          labels: {
            formatter() {
              return `${this.value}°`;
            },
          },
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: '#666666',
              lineWidth: 1,
            },
          },
        },
        series: [],
      },
    };
  },


  created() {
    Vue.set(this.options, 'series', this.$store.state.parts);
  },

};
</script>

I want the data to be updated without making any changes to the code and saving it.

Could you reproduce your app/chart in online code editor like codesandbox or stackblitz? — Wojciech Chmiel
– Wojciech Chmiel, Commented Jan 15, 2019 at 8:34

chrfs · Accepted Answer · 2019-01-16 09:06:24Z

1

You should use a computed to get the value with reactivity from the store, that way you don't need the created hook anymore. Also you should never access values from your store directly through the state, instead create a getter.

I'm not sure what are you trying to do, however this should be the right structure. If you only want to set this.options.series = this.$store.getters.parts. Like you are already doing with the Vue.set(this.options, 'series', this.$store.state.parts), in that case, add a watcher for the computed property and set the new property value.

{
  watch: {
    parts (updatedParts) {
      this.series.parts = updatedParts;
    }
  },
  computed: {
    parts () {
      return this.$store.getters.parts;
    }
  }
}

edited Jan 16, 2019 at 9:06

answered Jan 16, 2019 at 8:36

chrfs

4024 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs Data Update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related