使用vue数据变化时d3图表自动更新

Question

我希望每次我的模拟发生变化并传递到数据时，条形图都可以重新渲染或更新。我在条形图组件中查看了 dataa，但它不起作用。 “console.log('这个', this.dataa);”永远不会触发。我不知道哪个部分是错误的。

这是我的代码：

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

以及条形图组件中

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();
}

};

谢谢！

Answer 1

使用

watch

而不是

watcher

，为了更好的衡量，我还会添加 newValue 参数。

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

这里是有关监视属性的更多信息：https://v2.vuejs.org/v2/guide/compulated.html#Watchers

Answer 2

添加到上面的正确答案中，如果您正在使用级联或嵌套对象，并且当较低级别的子对象更改时，手表不会更改；这对我有用：

    watch: {
    data: {
      deep: true, // Enable deep watching
      handler(newVal) {
        console.log('watcher sees significant changes', newVal);
        // do something
      },
    },
  },