Reactive Data Tutorial

[mlapeyre3]

Expected Behavior

On data change, reactiveProp will either call update() if only the data inside the datasets has changed or renderChart() if new datasets were added.

Actual Behavior

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData"

More information

I tried to run the Example from Reactive Data section but I got this error which seems pretty common. Is the parent not the only one mutating the prop (with this.fillData()) ? So why the error, as I think I am following the one-way data flow (the child component is not modifying the props, only reading it).

Here are the two components
Parent

<template>
    <div class="small">
        <line-chart :chart-data="datacollection"></line-chart>
        <button @click="fillData()">Randomize</button>
    </div>
</template>

<script>
  import LineChart from './basics/ChartLine.vue';

  export default {
    name: 'sharing-page',
    components: {
      LineChart,
    },
    data() {
      return {
        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() * (46)) + 5;
      },
    },
  };
</script>

<style>
    .small {
        max-width: 600px;
        margin:  150px auto;
    }
</style>

Child (chart component)

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

  export default Line.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
      // this.chartData is created in the mixin
      this.renderChart(this.chartData, this.options);
    },
  });
</script>

Any idea why I can not run the example from the documentation ?
Thanks!

Environment

• vue.js version: 2.3.4
• vue-chart.js version: 2.6.5
• npm version: 3.10.10

[mlapeyre3]

Hi,

I changed the dataCollection initialisation from dataCollection: null to dataCollection: {} and now the chart is being drawn.

However, I still have the console error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData"

[apertureless]

Yeah there is a problem with the init of the chart if the data is null. Which is discussed in #122
There will be a fix in the next version.

I will see if I can reproduce the warning.

[apertureless]

Should actually be fixed in the next release 2.7.0 however I could not reproduce the warning. Maybe because of the #122 fix.

I also added the reactive prop example to the live examples. Which is working fine and without warnings.