Why do I have en error "Unexpected mutation of "modelValue" prop" in Vue?

Question

So i'm working with you and I have a select component, I created a modelValue prop which is an empty string, and passed it in v-model:



props:{
            modelValue:{
                type: String
            },
            options:{
                type: Array,
                default: () => []
            }
        }

But for some reason it gives an error: Unexpected mutation of "modelValue" prop. I just started working with Vue so I'm not sure where this error could come from. I was following a tutorial and everything seemed to work there.

user_12074415 · Answer

You can't modify a prop directly. The best way is create a computed with get set functions and emit update inside set function.

https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

computed: {
    localModelValue: {
        get() {
            return this.modelValue
        },
        set(newValue) {
            this.$emit('update:modelValue', newValue)
        },
    },
},

And in the component instance declare prop as sync

https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

:model-value.sync="..."

user_20068880 · Answer

create life cycle "computed"

computed: { localModelValue: { get() { return this.modelValue }, }, },
After that change v-model="modelValue" to v-model="localModelValue"

Why do I have en error "Unexpected mutation of "modelValue" prop" in Vue?

2 Answers