d3.jsvuejs2vue-componentc3.js

d3 chart update automatically when data change by using vue


I want every time my mock changes and paesss to dataa, the barchart can re-render or updated. I watch dataa in barchart component, but it didn't work. "console.log('this', this.dataa);" never trigger. I have no idea which part is wrong.

here is my code:

<sr-bar-chart
 :title= "descriptionText.title_traffic"
 :dataa= "mock"
 :unit="descriptionText.avg7d_unit_people"
 :index="'1'"
 :barColor="'#adadad'"

and in bar chart component

export default {
 name: 'sceneBarChart',
 props: ['title', 'dataa', 'unit', 'index', 'barColor'],
  data() {
  return {
    count: 0
  };
},
watchers: {
  dataa() {
    console.log('this', this.dataa);
    this.drawMap();
  }
 },
 methods: {
  drawMap() {
   ....
  }
 },
 mounted() {
  this.drawMap();
}

};

Thanks!


Solution

  • Use watch rather than watcher and just for good measure I'd add the newValue parameter as well.

     watch: {
       dataa(newValue) {
         console.log('this', this.count);
         this.drawMap();
       }
    

    here is more info on watched properties: https://v2.vuejs.org/v2/guide/computed.html#Watchers