$attrs is readonly - Githubissues

daniel-cabane commented 3 years ago

Hello, I am working on a project with Vue (using Vuetify). I just added vue-roller which works fine, except that every time that the text of the roller changes I get 2 vue warnings :

[Vue warn]: $attrs is readonly.
[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: "text"

Would you have any idea how I can fix this ? Thanks !

Andy-0414 commented 3 years ago

@Prop({ default: "0000", type: String as PropType<string>, required: true })
readonly text!: string;

This is the code that works now Can you check if you have a string type value? And send me the offending code!

daniel-cabane commented 3 years ago

Thanks for the quick response ! I am not sure how I can send you the code as it is within a rather large project. Here's what I have : If I write

<Roller text="1234"></Roller>

I get the following warnings :

[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.

The code

<Roller :text="myComputedProp"></Roller>

where myComputedProp is a computed property which returns a string, I get the same warnings and then whenever the computed property changes, I get the warnings

[Vue warn]: $attrs is readonly.
[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: "text"

To give you some background, this is in a Laravel 5.7 with Vue 2.5 (using Vuetify 1.5) project. I am using Laravel mix 4.0, which might be the source of the problem. Below is my package.json for reference

"devDependencies": {
        "axios": "^0.18.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.26.3",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.6"
    },
    "dependencies": {
        "@codekraft-studio/vue-animated": "^0.1.3",
        "chart.js": "^2.9.3",
        "katex": "^0.10.0",
        "laravel-echo": "^1.8.1",
        "material-design-icons-iconfont": "^4.0.4",
        "mathjs": "^5.8.0",
        "moment": "^2.24.0",
        "moment-timezone": "^0.5.25",
        "pusher-js": "^7.0.0",
        "sortablejs": "^1.9.0",
        "vue-avatar-editor-improved": "^1.0.4",
        "vue-card-stack": "^1.2.1",
        "vue-cropperjs": "^3.0.0",
        "vue-roller": "^1.12.3",
        "vue-router": "^3.0.3",
        "vuedraggable": "^2.21.0",
        "vuetify": "^1.5.1"
    }

Andy-0414 commented 3 years ago

When I try it myself, the error does not appear. First of all, I will keep this issue open. Please send the error code by making an example using codepan or other service. Then we will fix it as soon as possible.

daniel-cabane commented 3 years ago

I am sorry I haven't been able to find the cause of my problem. I also haven't been able to reproduce it anywhere I could share the code with you. Just FYI I am not a professional developer so I might have wired something wrong from the start. Also, I can't spend too much time on this. I guess without any hope of progress, you can probably close or delete this issue. Great work BTW, I love the animation of your roller !

Andy-0414 commented 3 years ago

Sorry for not helping. If you find the cause of the error or reproduce the situation, we will fix it!

henriquevc commented 3 years ago

I had the same problem here, but i find the cause. I'm using the vue-roller together with vue-svg-gauge and when both are being used, it gives the error of "Vue warn]: $attrs is readonly" and "[Vue warn]: $listeners is readonly.". When I comment the line where I use vue-svg-gauge, the error disappear. So, try to remove some components that are being used together with vue-roller and observe if the error persists.

Andy-0414 commented 3 years ago

Let's check it out quickly!

mikadev commented 2 years ago

Hello any solution ? i had the same problem

catalin-nistor commented 2 years ago

A duplicate VueJS install causes this, the duplicate is inside of node_modules folder of the package.

I did not have the time to go deep into this but the following code inside of vue.config.js fixed the issue on my side. I simply remove the duplicate directly:

const fs = require('fs')
const path = require('path')

const duplicateNodeModules = [
  'vue-roller/node_modules/vue'
]

duplicateNodeModules.forEach(duplicate => {
  const file = path.resolve(__dirname, 'node_modules/' + duplicate)
  if (fs.existsSync(file)) {
    fs.rmdirSync(file, { recursive: true })
  }
})

Webpack bundles two Vue instances, so this could be the reason why on some setups it works and some do not.

Thanks!

Andy-0414 commented 2 years ago

Vue3 support has been completed. You can use the beta version right away! 👏

Andy-0414 / vue-roller

$attrs is readonly #9