How to handle changing props inside a component

Question

I'm making a Form wrapper and I'm wondering how to handle data object prop.

From what I have seen out there, there are some (like FormKit) that mutate the prop object that holds the data. This is not a recommended way according to the official docs. Then there are those (like VueFormulate) that create a shallow copy of the data object before emiting the changed object. To support nested data object you need to deep copy the data object on every change. This seems wasteful with large forms.

Is there an alternative where you don't deep copy an object and you don't mutate object prop?

Answer 1

You could possibly use v-model. as the docs will say, it's shorthand for the child component having a property bound from the parent and when a change event occurs you emit an update event from the child to the parent to have the parent update the property, and the child will subsequently sync to the new value.

ie:

childComponent *has value change*
  onChange (value) => this.$emit("updateValue", value)

parentComponent *recieved "updateValue" event*
  onUpdateValue(value) => this.parentValue = value