Arbitrary nested dynamic forms (still unclear: mutating object props - bad or good/ok)

props
components
forms

#1

Hi, in https://codesandbox.io/s/0y7jw79ljn and https://github.com/drahkrub/props-as-data I created a little demo for arbitrary nested dynamic forms.
grafik
Of course such forms can be much more complex, it’s just a demo.
The idea is that some root component holds all the data and passes parts of the data as “objects props” down the component hierarchy. Each sub component can mutate its object prop which in return alters the state of the root component.

As said in https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component will affect parent state.

I’ve read a lot about this stuff, here (e.g. Is mutating object props bad practice?), on SO and in the official docs - but it’s still unclear for me, if this is ok or not (or if it can be problematic in future versions of vue.js).

It would be very nice, if a clear statement from higher authorities would be given.

If there is a different/better way to handle arbitrary nested dynamic forms, I would be very interested!

Cheers!


Is mutating object props bad practice?
#2

I would say mutating a prop is bad practice. You don’t know where the value is coming from. The source of the object might not expect it to be mutated. If the value comes from Vuex, you will get a warning since you’re not using a mutation.

As a tip, have you looked at provide/inject? See https://vuejs.org/v2/api/#provide-inject. Although it states that by design, provide/inject is not reactive, any reactive object passed down remains reactive. This might be suitable for your use case as well, and doesn’t have the downside of prop mutation.

Provide/inject has 2 additional advantages over props in this case: 1) you don’t have to pass down the prop through the hierarchy, this is done for you, and 2) you can nest components that know nothing about the data you want to pass down.


#3

Hi, thanks for your answer! Yes, I know about provide/inject but I do not think it’s useful/fitting for this requirement/problem, even in this simple example. The root component would have to provide the complete data. I think the sub components would have to provide their ‘injected’ data, too - otherwise I can’t imagine how the ‘injects’ of deeper components should look like (because of their static nature).