Vue-chartjs: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

[afuno]

Expected Behavior

The values in the chart should be changed without any errors.

I mean this code: http://vue-chartjs.org/#/home?id=reactive-data

Actual Behavior

The chart is initialized. The values are displayed. After pressing the button, the values change.

But in the logs of the browser, this errors always appears:

[Vue warn]: $attrs is readonly.

And second:

[Vue warn]: 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"

My code is exactly the same as your code in the documentation. I did not specifically change it.

Environment

• vue.js version: 2.4.1
• vue-chart.js version: 2.7.1
• npm version: 5.3.0 (but I use yarn)
• yarn version: 0.27.5

[afuno]

If I replace this line:

<line-chart :chart-data="datacollection"></line-chart>

On this line:

<line-chart :chart-data="datacollection" :options="{ responsive: true, maintainAspectRatio: false }"></line-chart>

Then in the logs of the browser I get a second error:

[Vue warn]: 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: "options"

[apertureless]

Can you please provide a codepen for reproduction?

[afuno]

@apertureless I updated all the packages to the current versions. Now there is another error. I updated my first post.

Can you please provide a codepen for reproduction?

I'm using the latest versions. I only use your code. You can perfectly reproduce the problem in yourself. Please.

_P.S. I do not know how to demonstrate the .vue component on the codepen. Once again, I'll write that my code is identical to your code from the documentation._

[DenisLapi]

@afuno This is how you can create a component without creating a new .vue file. This works on Codepen

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

[afuno]

@DenisLapi I do not need to create components this way. I use .vue components in the project. The question concerns only .vue files.

The author wrote the code in their documentation, which is not working properly.

[DenisLapi]

@afuno I just wanted to show you how to create a component on Codepen, that was actually answer on your question/confusion how to create it.

P.S. I do not know how to demonstrate the .vue component on the codepen

Peace!

[someother1]

https://github.com/vuejs/vue/releases/tag/v2.4.0 ($attrs is a new feature of vue).
downgrading vue to 2.3.4 works, until you deliver a patch.

[afuno]

@someother1 This doesn't correct the main problem.

[claide]

How about adding the options directly on your chartRender function, instead of using the :options.

[apertureless]

Well thats weird. I have the reactive prop example here in this repo
https://github.com/apertureless/vue-chartjs/blob/develop/src/examples/ReactivePropExample.js

And running here yarn dev works perfectly and the example chart is updating without any warnings.

And the mutating warning for the options is also weird. As the options never get mutated at any point.

Can you check out this repo and see if yarn dev works for you and you get any errors?
You are using webpack right?

I will check for the $attrs warning. Right now the peerDependency is "vue": "^2.3.4" I will update it to the latest vue version and see.

However... it is also very weird... because as attrs are new in the latest vue release... I am not using it :o

[apertureless]

Okay, I updated the peerDependency to match the current vue version.
But... I don't get the $attrs warning.

Any other have this warning?

[afuno]

@apertureless I will write for the time being only about $attrs. This error only occurs when using your package. I do not know why it is so. But as soon as I removed the use of your package, all the errors is lost.

:(

[apertureless]

Hm, thats interesting. Well that are only warnings. What is your build setup? Webpack 2?

[afuno]

@apertureless Yes. https://github.com/rails/webpacker

[Mooooooon]

@apertureless Hi, I had the same Issues
This is my code

chart.js

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

export default Line.extend({
  mixins: [reactiveProp],
  mounted () {
    this.renderChart(this.chartData, {
      //some options
    })
  }
})

chart.vue

<chart :chart-data="chartData"></chart>
<button @click="fillData()">Randomize</button>

import Chart from './chart/Chart'

export default {
  components: {Chart},
  data () {
    return {
      chartData: {
        labels: new Array(3),
        datasets: [{
          label: 'prices',
          data: [1, 2, 3]
        }]
      }
    }
  },
  methods: {
    fillData () {
      this.chartData = {
        labels: new Array(3),
        datasets: [
          {
            label: 'prices',
            data: [3, 2, 1]
          }
        ]
      }
    }
  }
}



md5-3843e4b0746f50cd8a8a7131f8ceb313



"dependencies": {
  "chart.js": "^2.6.0",
  "element-ui": "^1.4.0",
  "normalize.css": "^7.0.0",
  "vue": "^2.3.3",
  "vue-chartjs": "^2.7.2",
  "vue-electron": "^1.0.6",
  "vue-router": "^2.5.3"
}

[Mooooooon]

New findings.

The actual version is Vue 2.4

// yarn.lock 
vue@^2.3.3:
  version "2.4.2"

If I add some props(width or height) and do some operations(example: change v-model data), there will be warnings.

<chart :height="chartHeight" :width="chartWidth"></chart>
<input v-model="a">

data() {
  return {
    chartHeight: 200,
    chartWidth: 200,
    a: 1
  }
}



md5-91ee77a3f15c28f1c32ad3314692e3af

After removing the props, the warning disappears.

<chart></chart>

[apertureless]

Can you create a minimal repository for reproduction? Right now with a clean vue cli scaffold, I can not reproduce it.

[Mooooooon]

@apertureless You are right
I use vue init simulatedgreg/electron-vue my-project
Maybe you can closed this, I'm not sure what's wrong,

[farefray]

I had exactly the same problem, but its gone after I upgraded vue from 2.2.2 to 2.4.2

[cpouldev]

+1 same issue here with the latest version of Vue

[apertureless]

Hey @farefray , @hambos22

did you scaffolded the project with vue-cli ? Which template?

Could someone of you provide a minimal repository for reproduction?

[jenslind]

@apertureless I think i'm running into this too.

Made a small repo to reproduce:
https://github.com/jenslind/vue-chartjs-151
npm install && npm run build && open index.html

It might be me doing something wrong too :cat:

[apertureless]

Thanks @jenslind !

Will look into this.

[cpouldev]

Hello @apertureless. First of all I forgot to thank you for this very useful project! Great work!

I didn't scaffold with vue-cli. I'm having this issue with vanilla laravel installation.

[apertureless]

@hambos22 okay thanks for the info. I will check it out.
You're using laravel mix to bundle it, right?

[cpouldev]

Yes exactly

[s0up]

I seem to be having this issue as well using [email protected] / [email protected] in my electron app. I'm literally using the same chart code and same vue/vue-chartjs versions on the non electron version and i get no errors. Not sure what to make of that!

[apertureless]

I will check the electron boilerplate if I find some time.

[danieldocki]

I'm having a similar problem, I use rails with the gem webpacker, it seems like it makes use of two instances of Vue.

[apertureless]

Are you using webpack 1 or 2?

_Sent from my OnePlus ONEPLUS A3003 using FastHub_

[s0up]

I am currently using Webpack 2. The app I'm having issues with was deployed via https://github.com/SimulatedGREG/electron-vue

[danieldocki]

.
.
.
    "webpack": "^3.5.5",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.4.5"
  }

[zxc23]

I'm currently getting this warning as well. I'm also using the electron-vue project at https://github.com/SimulatedGREG/electron-vue. I've made a wrapper component similar to that used by Vuestic-Admin at https://github.com/epicmaxco/vuestic-admin

[Vue warn]: $attrs is readonly.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten

The warnings show up whenever the data changes. Everything appears to work correctly, it's just console warnings at the moment. I will continue trying to solve this.

[apertureless]

Well this seems to be related to electron. However I am not sure why... and it only appears if you're using the bundled version.

[apertureless]

Okay, I am still not sure, why. But it seems that electron does not like the extend()

However you could also use the extend in the component or as a mixin.

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

export default {
  mixins: [reactiveProp, Line],
  mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

or

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

export default {
  extends: Line,
  mixins: [reactiveProp],
  mounted () {
    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

This way no warnings get thrown.

[zxc23]

Thanks. That does prevent the warnings. Strange issue.