$attrs and $listeners are read only?

[emjimadhu]

What do i have now?

i created two components, one is for Horizontal Bar and Pie Chart.

I used those two components in a parent component. Now, parent component has Two Horizontal Bar and One Pie Chart.

Expected Behavior

It should show two horizontal bar and a Pie Chart.

Actual Behavior

When i mutate the values for charts. It gives me this error,

[Vue warn]: $attrs is readonly. emjimadhu/project/node_modules/vue/dist/vue.runtime.common.js:474 found in <HorizontalBar>

[Vue warn]: $listerners is readonly. emjimadhu/project/node_modules/vue/dist/vue.runtime.common.js:474 found in <HorizontalBar>

[Vue warn]: $attrs is readonly. emjimadhu/project/node_modules/vue/dist/vue.runtime.common.js:474 found in <PieChart>

[Vue warn]: $listerners is readonly. emjimadhu/project/node_modules/vue/dist/vue.runtime.common.js:474 found in <PieChart>

at first charts are empty. but when i reload the page, it shows the charts but with the same error.

PS

so what i noticed now was that error comes when all charts are visible.. i applied v-if to those charts div and if i open one at time, the error is not coming.

Environment

• vue.js version: 2.4.4
• vue-chart.js version: 2.8.7
• npm version: 5.4.2

[apertureless]

I guess it is related to this #216 #151

Try to make your component this way:

import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  data () {...}
}

[jesus143]

Hi @apertureless, I have same problem and it works for me, Thanks!

import {Line} from 'vue-chartjs'

export default {
extends: Line
}

[apertureless]

@jesus143

Well, with v3 of vue-chartjs this is also the only way to create your chart component.
Either extends: Line or mixins: [Line]