Consider this scenario where we have an input that needs to be bound to a model that has not yet been created:
<input type="number" v-model="emptyObject.model"/>
The emptyObject: {}
is present in the data
before the Vue instance initialization, but it does not contain any properties. The property emptyObject.model
is dynamically added to the object based on user actions (such as a click event). However, the issue arises when this property is added late and it doesn't exhibit reactivity. I observed that reactivity is only achieved if the property is included in emptyObject
before the Vue instance creation. Is it not possible in Vue to bind values to models that are not part of the initial data
object? Angular can handle such scenarios, so I assumed Vue could as well.