Newest Update throws mutation errors

[hybridwebdev]

I'm working on a project using Vue 2.6x. It seems that your newest push causes a props mutation error:

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

vue.runtime.esm.js?2b0e:619 [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: "value"

found in

---> <R>
       <Index> at src/nodes/editor/fields/class-list-handler/index.vue
         <Index> at src/nodes/editor/fields/basic-styling/cols/index.vue
           <BasicStyling> at src/nodes/editor/fields/basic-styling/index.vue
             <Field> at src/nodes/editor/fields/index.vue
               <Edit> at src/nodes/editor/sections/edit-panel/index.vue
                 <Index> at src/nodes/editor/index.vue
                   <Root>
warn @ vue.runtime.esm.js?2b0e:619
eval @ vue.runtime.esm.js?2b0e:4678
reactiveSetter @ vue.runtime.esm.js?2b0e:1045
(anonymous) @ vue.min.js?ver=5.7.2:6
prepatch @ vue.min.js?ver=5.7.2:6
x @ vue.min.js?ver=5.7.2:6
(anonymous) @ vue.min.js?ver=5.7.2:6
x @ vue.min.js?ver=5.7.2:6
(anonymous) @ vue.min.js?ver=5.7.2:6
x @ vue.min.js?ver=5.7.2:6
(anonymous) @ vue.min.js?ver=5.7.2:6
e._update @ vue.min.js?ver=5.7.2:6
r @ vue.min.js?ver=5.7.2:6
fn.get @ vue.min.js?ver=5.7.2:6
fn.run @ vue.min.js?ver=5.7.2:6
un @ vue.min.js?ver=5.7.2:6
(anonymous) @ vue.min.js?ver=5.7.2:6
qe @ vue.min.js?ver=5.7.2:6
Promise.then (async)
ze @ vue.min.js?ver=5.7.2:6
Ye @ vue.min.js?ver=5.7.2:6
(anonymous) @ vue.min.js?ver=5.7.2:6
fn.update @ vue.min.js?ver=5.7.2:6
ce.notify @ vue.min.js?ver=5.7.2:6
set @ vue.min.js?ver=5.7.2:6
ke @ vue.min.js?ver=5.7.2:6
callback @ index.vue?2243:15
He @ vue.min.js?ver=5.7.2:6
n @ vue.min.js?ver=5.7.2:6
He @ vue.min.js?ver=5.7.2:6
e.$emit @ vue.min.js?ver=5.7.2:6
set @ index.vue?6ced:29
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
value @ vue-slider-component.umd.min.js?4971:6
value @ vue-slider-component.umd.min.js?4971:6

Downgrading to your last version removes this issue. As far as I can tell, it's because you're mutating the value directly in your component, although I'm not well versed in Typescript so I could be wrong.

Here's an example of how I am using your component:

range-slider( 
   :data='options'
   :value='get'
   @change="set"
   :adsorb="true"
   tooltip='always'
)

export default {
props: ['options', 'value'],
methods:{
        set(v){
            let { classes } = this
            let z = classes.filter( _class => !this.options.includes(_class) )
            let n = [...z, v].join(' ')
            this.$emit('input', n)
        }
    },
computed: {
        classes(){
            return this.value.split(' ')
        },
        get(){
            let list = this.classes.filter(e => this.options.includes(e))
            return list[0] || ''
        }
    }

I am creating a component that wraps around your component. When your @change even fires, I do logic and then do a simple $emit('input') as the component I created is meant to be its own special input.

Options is just a simple array, such as:

let options = [ 'col-1', 'col-2' ...etc]

As you can see, I'm not directly mutating anything in my component, I am simply putting a getter/setter on your component and then using $emit to send the value back up to my parent component.

To conclude, it seems one of the merged changes in the newest version has broken something, causing these errors.

[NightCatSama]

It is not clear in what scenario you are using.

Is this issue helpful to you?
#497

If not, can it be reproduced in the online example.

[hybridwebdev]

Unfortunately producing an online example is going to be tricky, due to how complex my project is.

My intention is to pass down a value and options as props to your component, and then bind to your components change event and then emit the new value up to the parent.

I read through the thread you linked, and can clarify my environment.

I am currently using vanilla webpack, as I created the project with VUE cli. However, I am not using

import vue from "vue" 

anywhere, as I am using the CDN version with runtime compiler from

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js

which I load on page load in the head.

From what I read in the thread you linked, it seems like this might be what is causing the issue. It seems there might be an incompatibility with your new version and using vue globally. Specifically olemarius's comment seems to relate to this in #342 .

[NightCatSama]

What is the version of the component you are using now?

and what version is it talking about here:

Downgrading to your last version removes this issue.

[hybridwebdev]

The version that fixes the issue is 3.2.9.1

The newest version that has issues is your last commit from 7 days ago.

[NightCatSama]

The dependency upgrade was only merged 7 days ago, the last release was 6 months ago.

And the latest version is 3.2.11.

https://www.npmjs.com/package/vue-slider-component

[hybridwebdev]

Yes, 3.2.11 is the version that has issues. I had thought that was the newest version with the dependency upgrade.

[NightCatSama]

Then it looks like you can only use @beta, which is version 3.2.9-1.

It's probably due to duplicate require('vue'), and I can't fix it at @latest because it causes errors for versions below 2.6.x.

[hybridwebdev]

Fair enough. I'm happy to close this as you seem aware of the issue, but a fix is impractical. Thanks for your hard work in creating an otherwise great plugin :)