LineChart.vue nie renderuje

Question

Dwie godziny próbuje coś wskórać z vue-chart, a dokładnie line-chart. Przeglądam dokumentacje(zresztą beznadziejną), codepen. I nie wiem gdzie jest błąd. Consola czysta oczywiście. A oto kod:

<template>
  <div :class="`${className}`">
    <line-chart :chart-data="dataCollection"></line-chart>
  </div>
</template>
<script>
import LineChart from "./mixins/LineChart.js";
import { MockPropsDataPieChart } from '../Mocks/props/PieChart';
export default {
  name: 'AtomLineChart',
  data() {
    return {
      className: 'lineChart',
      dataCollection: null,
    };
  },

  mounted () {
    this.fillData();
  },
  methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt()],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }, {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
  },

  components: {
    LineChart
  }
};
</script>

Mixin

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

export default {
  extends: Line,
  mixins: reactiveProp,
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

 

Answer 1

Co to za importy/eksporty poza tagami <script>?

Comments

To jest po prostu normalnie osobny plik, a to jest LineChart.js mixin :), po prostu wkleiłem to tak.

---

A ok, błąd masz w pliku LineChart.js zamiast:

mixins: [reactiveProp],

masz: 

mixins: reactiveProp

i wtedy powinno zadziałać - tak przynajmniej wynika z testów na codesandbox.io ;)