When prop value is undefined, setting a value causes warning

Question

I have an initial data model that's used to populate a form. I have various subcomponents that get their data via prop. However, if I pass undefined through the prop, I can't set the value later without VueJS giving me a warning. But sometimes, my data is undefined and that's okay, and the form is there to make it not undefined (via .sync modifier). How do I avoid this warning?

Example

Initial Data Model:

{
    color: undefined
}

App Template:

<div>
    <color-picker v-bind:color.sync="color"></color-picker>
</div>

Subcomponent Template:

<div>
    <button v-on:click="setRed"></button>
</div>

Subcomponent Controller/Defintion/Whatever:

Vue.component('color-picker', {
    props: {
        color: {
            default: function () { return 'blue'; }
        }
    },
    methods: {
        setRed: function () {
            this.$set(this, 'color', 'red');
        }
    }
})

Even though the data passed to the prop is undefined the prop default is NOT triggered. The value of this.color remains undefined.

However, when I click the button to set the color I get a warning from VueJS saying not to add reactive properties, declare data upfront.

Wouter Vandevelde Wouter Vandevelde · Accepted Answer · 2017-10-23T15:26:42

You should use this.$emit('update:color', 'red') to update your prop: Working example.

Also take a look at the documentation about the .sync modifier.

When prop value is undefined, setting a value causes warning

1 Answers