为什么我在 Vue 中出现错误““modelValue”道具的意外突变”？答案

【问题标题】：Why do I have en error "Unexpected mutation of "modelValue" prop" in Vue?为什么我在 Vue 中出现错误““modelValue”道具的意外突变”？
【发布时间】：2022-07-15 08:22:13
【问题描述】：

所以我正在和你一起工作，我有一个选择组件，我创建了一个空字符串的 modelValue 道具，并将它传递给 v-model：

<select v-model="modelValue" @change="changeOption">
        <option 
        disabled 
        value="">
        Choose from the  list
        </option>
        <option 
        v-for="option in options" 
        :key="option.value" 
        :value="option.value">
            {{ option.name }}
        </option>
    </select>

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

但由于某种原因，它给出了一个错误：“modelValue”道具的意外突变。我刚开始使用 Vue，所以我不确定这个错误可能来自哪里。我正在学习一个教程，一切似乎都在那里工作。

【问题讨论】：

这能回答你的问题吗？ error Unexpected mutation of "todo" prop in vue.js (I'm using vue3)

标签： vue.js

【解决方案1】：

您不能直接修改道具。最好的方法是使用 get set 函数创建一个计算函数，并在 set 函数中发出更新。

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

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

并在组件实例中将 prop 声明为同步

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

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

【讨论】：