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