Click the link below for a sample of what I am attempting to do with Vue:
In my application, multiple parts of the data in storage need the same input format. So, I aim to make a generic input form that will take values from the parent component and establish a two-way connection between them, updating the main component's store. Since it is uncertain which value the input component manages at the input component level, altering the store directly in the child component isn't feasible.
However, when I follow the configuration provided in the example, the store doesn't update when the input values change. The reason behind this eludes me.
This appears to be due to Vue being unable to detect changes in the object. Reactivity is restored if v-model directives in the child are removed and replaced with :value and @input, followed by handlers that fully overwrite the model.value object. Refer to the link below for a functional demonstration. My comprehension might not be completely accurate, and there could be a way to achieve this using the simpler v-model.
Please find at the below link a minimal example of the type of thing I am trying to achieve in Vue. In my real application, I have several pieces of data maintained in my store which require the same format of input. Therefore, I want to create a general input form which will receive the values from the parent component, and will create a 2-way binding between them, updating the store in the main component. This setup means I cannot simply update the store in the child component, since I don't know at the input component's level which of the store's values the input component is managing. However, when I set things up as in the example provided, the store is never updated when the values in the input changes. I cannot figure out why this is. It seems this is something to do with Vue detecting changes in the object. If I remove the It is essential to ensure that your store remains reactive. To achieve this in your You need to make store reactive too, so in Your v-model directives in the child, and replace them with :value and @input, then use handlers which fully overwrite the model.value object, then reactivity is restored. See the below link for a working example. I'm just not sure my understanding is 100% solid, and if there's a way to make it work with the simpler v-model.Store.js, follow these steps:import { reactive} from 'vue'
const Store = reactive({
name: {
firstName: "Bill",
lastName: "Gates"
}
})
...
Store.js :import { reactive} from 'vue'
const Store = reactive({
name: {
firstName: "Bill",
lastName: "Gates"
}
})
...