vue.js - 为什么我在 Vue 中出现错误 "Unexpected mutation of "modelValue"prop"？

Question

所以我和你一起工作，我有一个选择组件，我创建了一个空字符串的 modelValue prop，并将它传递给 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” Prop 的意外突变。我刚开始使用 Vue，所以我不确定这个错误是从哪里来的。我正在学习教程，一切似乎都在那里工作。

Answer 1

您不能直接修改 Prop 。最好的方法是使用 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 为 sync

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

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