How to specify types, default values and validators for Vue component data

Question

I have the following component and would like to set the type and default value for editing, which gets toggled to display either Item values or an <input>:

    Vue.component('item', {
            props: {
                'item': Item,
                'editing': {
                    type: Boolean,
                    default: false
                },
            },
            data: function() {
                return {
                    _cachedItemText: '',
                }
            },
            methods: {

The following warning results when the value of editing gets toggled by pressing an Edit button (not shown).

[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: "editing"

In the Props documentation, there's an example showing how to set the type, default value and validator for a prop. Is there an analogous way to set these attributes for a data item?

Also, I'm not passing editing in from the parent component, so I don't think it really needs to be a prop instead of a data item.

I don't think you should be using item both as a component name and a prop name. — Husam Ibrahim
@HusamIbrahim I wondered about that, too. Maybe it should be "item-component" or something. — Tom Russell

Nguyen You Nguyen You · Accepted Answer · 2018-09-28T05:33:32

[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: "editing"

I see. You're passing the prop editing from the parent component to the child component. Then, in the child component, you use that prop and definitely have a method that mutate that prop editing directly.

They said you should use a computed value which derived on the prop editing and mutate that computed value instead.

In addition, whenever you want to change the value of the prop editing, you should emit an event and let the parent component listen to that, then mutate the editing value. After the editing value is changed, the child component will automatically reflect the change.

How to specify types, default values and validators for Vue component data

1 Answers