VueJS - VueChart JS not getting updated on store.dispatch

Question

I have something like accepting parameters from a form and submitting. On submit, I dispatch an action and return the response and assign them to the parameters of the chart. But the change is not happening unless i press the submit button twice. But when i press the submit button, the label is getting updates as there is a v-model linked to the label select. But since there is no v-model for the bar-chart component, it is not getting updated.

 <template>
  <v-container fluid>     
     <v-card class="small" v-if="!empty">
        <bar-chart :chart-data="datacollection"></bar-chart>
    </v-card>   
  </v-container>
</template>

<script>
  import BarChart from './BarChart.js'
  import { mapGetters, mapActions } from "vuex";

  export default {
    name : "TestLegPerformance",
    components: {
      BarChart
    },
    data: () => ({   
      startdate: null,
      enddate: null,
      startmodal: false,
      endmodal: false,
      datacollection : {         
          labels: [],
          datasets: [
            {
                label: '',
                backgroundColor: '#C58917',
                data: []
            }
          ]
        },
      selected: [],     
      empty: true 
    }),
     computed: {
        ...mapGetters({
        planNames: "planNames",
        details: "details" //parameter that i return from getters
        })
    },
    mounted () {
        this.getAllPlanNamesAction();
    },

    methods: {
      ...mapActions(["getAllPlanNamesAction","getDetails"]),    


      //assigning values to the chart parameters
      changeData(){
        this.empty = false;
        let collectionClone = Object.assign({}, this.datacollection);
        collectionClone.datasets[0].label = this.selected;
        collectionClone.labels = this.details.months;
        collectionClone.datasets[0].data = this.details.sub_count;
        this.datacollection = collectionClone;
        console.log('Collection Clone: ',collectionClone)
      },

     // form submit action 
      submitAction(){
        this.empty = true;
        console.log("Plan: ",this.selected);
        console.log("Start Date: ",this.startdate);
        console.log("End Date: ",this.enddate);        
        this.$store.dispatch('getDetails',
         [this.selected,this.startdate,this.enddate])
        this.changeData();
      }
    }
  }
</script>

Hello, it's a little unclear what your actual question is. On the second click is the chart updating? In that case, are you trying to figure out how to get it to happen on the first click, or are you just wondering why the first click isn't updating it? Also, you've included a lot of code; have you considered trying to reduce it to a minimal reproducible example? Oftentimes simplifying the code like that can help you localize the error/erroneous behavior to just a certain segment, making it easier for you to ask a more direct question. — Davy M
– Davy M, Commented Mar 5, 2018 at 6:11
yeah I want it to update the chart at the first click of submit. And edited the code. On the first submit, changes are happening at the chart label but not the data. On the second click , it is getting updated . — Jay Vignesh
– Jay Vignesh, Commented Mar 5, 2018 at 6:12
Did you review this as well vue-chartjs.org/#/home?id=reactive-data? — Mahmud Adam
– Mahmud Adam, Commented Mar 5, 2018 at 6:25

Cristi Jora · Accepted Answer · 2018-03-05 08:08:20Z

1

Chart.js and Vue Chart.js are not reactive by default. See this in the Vue Chart.js docs

See this example

answered Mar 5, 2018 at 8:08

Cristi Jora

1,75215 silver badges14 bronze badges

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

5 Comments

Jay Vignesh Over a year ago

Is there any way that i can do it without setting Interval ? @Cristi Jora ?

Cristi Jora Over a year ago

That was just an example to see that it updates. Just call your function (generateData in my case) whenever you want to update the chart

Jay Vignesh Over a year ago

I did and it doesn't seem to work. It worked only when i set some interval in monuted()

Cristi Jora Over a year ago

Make sure you initialize it first time. codesandbox.io/s/yknmk8or1z

Jay Vignesh Over a year ago

The issue is that I am having a submit buttom which takes the parameter from three fields and doing a submit where i am dispatching an action, mutating it and returning it to the vue. The thing I want to do is, once i do a submit , it should get the object from axios and update the chart at the same click. @Cristi Jora

Jay Vignesh · Accepted Answer · 2018-03-06 11:27:27Z

0

So after a lot of tries, I got it to work by redirecting the submit button to two different functions and adding a timeout between those two functions.

answered Mar 6, 2018 at 11:27

Jay Vignesh

1793 silver badges16 bronze badges

Collectives™ on Stack Overflow

VueJS - VueChart JS not getting updated on store.dispatch

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related