vue-chartjs ошибка реактивных данных

Question

Я пытаюсь использовать реакционный миксин данных для http://vue-chartjs.org/

Смонтированная функция для установки начальных данных работает, и я могу правильно видеть график, используя ответ 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>

Однако, чтобы проверить реактивную часть, сейчас я просто изменяю массивы данных напрямую, чтобы увидеть, как это работает:

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

Итак, изначально диаграмма работает нормально, но я не могу заставить работать реактивную часть.

Answer 1

Это не будет работать. Потому что реактивные миксины предполагают, что chartData весь объект набора данных chartjs С массивом данных, с метками и т. Д.

Но вы разделяете это, таким образом, реактивные миксины не могут работать. Потому что ваши данные диаграммы - это только чистые данные одного набора данных.

Чтобы решить ее, вы можете сделать две вещи:

1. Передать весь объект набора данных
2. Добавьте собственных наблюдателей.

Я думаю, самый простой способ - добавить двух наблюдателей для просмотра. chartData а также chartLabel и на вызове изменения this.$data._chart.update()