vue.js - vue-chartjs react 数据错误

Question

我正在尝试为 vue-chartjs 使用响应式(Reactive)数据混合

用于设置初始数据的挂载函数正在运行，我可以使用 API 响应正确查看图表:

fetchSessionTrends() {
    axios.get(endpoint)
    .then(({data}) => {
        this.sessions = data.map(session => session.sessions);
        this.sessionLabels = data.map(label => label.date);
        this.loaded = true;
    });
},

数据:

data() {
    return {
       endpoint: 'public/api/sessions',
       sessions: [],
       sessionLabels: [],
       loaded: false,
       daysFilter: 14
    };
},

我正在显示带有文本字段的图表以提供响应部分 - 期望它再次调用端点并接收新响应

<div class="col-md-2 session-filter">
    <div class="input-group">
    <input type="text" class="form-control" placeholder="days..." v-model="daysFilter">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="button" @click="refreshSessions">Go</button>
    </span>
    </div>
</div>
<line-chart v-if="loaded" :chart-data="sessions" :chart-labels="sessionLabels"></line-chart>

然而，为了测试 react 部分，现在我只是直接更改数据数组以查看它是如何工作的:

refreshSessions() {          
   this.sessions = [1, 2, 3];
   this.sessionlabels = ["june", "july", "august"];  
},

是的，所以这给了我错误

[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'map' of undefined" found in ....

 TypeError: Cannot read property 'map' of undefined

LineChart.js 如文档中所述，此处缩写为空格

import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins

extends: Line,
mixins: [reactiveProp],
props: {
 chartData: {
   type: Array,
   required: true
 },
 chartLabels: {
   type: Array,
   required: true
 }
},

mounted() {
  this.renderChart({
    labels: this.chartLabels,
    datasets: [
      {
        label: 'sessions',
        data: this.chartData
      }
    ]
  }, this.options)
}

所以，图表最初工作正常，但我似乎无法让 react 部分工作。

Answer 1

这是行不通的。因为 reactiveMixins 假设 chartData 是整个 chartjs 数据集对象。使用数据集数组、标签等。

但是你把它分开了，这样 reactiveMixins 就不能工作了。因为你的chartData只是一个数据集的纯数据。

要解决它，你可以做两件事:

1. 传入整个数据集对象
2. 添加自己的观察者。

我想最简单的方法是添加两个观察者来观察 chartData 和 chartLabel 并在更改时调用 this.$data._chart.update ()