Vue中Axios获取数据后ChartJS饼图不更新问题排查

嘿，我看你遇到了vue-bulma-chartjs饼图不更新的麻烦——明明pie_data已经从后端拿到数据更新了，nvrs对应的元素能正常渲染，可饼图就是纹丝不动。这大概率是因为这个封装的Chart组件没自动监听数据变化来重新渲染图表，给你几个实用的解决方案：

方案1：用key强制组件重新渲染 #

Vue的key属性是个小能手，只要key变了，组件就会重新创建实例，饼图自然就更新了。你可以把chartData转成字符串作为key，这样只要数据变了key就跟着变：

<div class="box"> 
  <p class="title">System Overview</p> 
  <chart :type="'pie'" :data="chartData" :key="JSON.stringify(chartData)"></chart> 
</div>

这个方法简单粗暴，见效快，适合快速解决问题。

方案2：手动调用Chart实例的更新方法 #

如果你不想重新创建组件，可以直接操作Chart实例来更新。先给组件加个ref：

<chart ref="pieChart" :type="'pie'" :data="chartData"></chart>

然后在拿到后端数据后，等Vue更新完DOM再调用update()：

created () {
  axios
    .get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
    .then(response => {
      this.nvrs = response.data['nvr_list']
      this.pie_data = response.data['pie_data']
      // 等DOM更新完再操作图表
      this.$nextTick(() => {
        if (this.$refs.pieChart?.chart) {
          this.$refs.pieChart.chart.update()
        }
      })
    })
    .catch(e => {
      console.log(e)
    })
}

这里用$nextTick是为了确保Vue已经把新的数据渲染到DOM上了，不然可能拿不到最新的Chart实例。

方案3：给Chart组件加个watch监听 #

有些封装的组件可能没做props变化的监听，你可以自己扩展一下组件，给它加个watch来监听data的变化：

components: {
  Chart: {
    extends: Chart,
    watch: {
      // 深度监听data的变化
      data: {
        deep: true,
        handler() {
          // 如果图表实例存在，就更新它
          if (this.chart) {
            this.chart.update()
          }
        }
      }
    }
  }
},

这样以后只要chartData变了，组件就会自动更新饼图，一劳永逸。

为啥nvrs能正常更新？ #

因为Vue对数组的直接替换（比如this.nvrs = 新数组）是能自动检测到的，模板里的列表渲染会跟着更新。但第三方Chart组件内部没处理props变化的逻辑，所以得我们手动帮它一把~

内容的提问来源于stack exchange，提问作者Cathal Cronin