It seems like I am headed towards a path of inefficiency when it comes to keeping data properly synced between Parent and Child components.
For instance, if I have a basic Child Vue element like the one below:
common/InputText.vue
<template>
<input v-bind:id="name" v-bind:value="value" v-on:input="changed($event, $event.target.value)">
</template>
<script>
props: ['name', 'value'],
methods: {
changed(event, value) { this.$emit('emitChanged', event, value); }
}
</script>
If I then use a Parent Vue element like the example below, where data is being bound to the Child elements, I encounter an issue. It appears that the binding only works from the Parent to the Child, with changes in the Parent not reflected in the child component.
Parent.vue
<input-text name="field01" v-bind:value="field01" @emitChanged="changed"></input-text>
<input-text name="field02" v-bind:value="field02" @emitChanged="changed"></input-text>
<script>
import inputText from "./common/InputText.vue";
export default {
data() {
return() {
field01: '',
field02: ''
}
},
components: {
input-text: inputText
},
changed(event, newValue) {
console.log(newValue);
}
}
</script>
To update the Parent data based on what the Child returns, I currently rely on modifying the changed method as shown below:
changed(event, newValue) {
console.log(newValue);
if( event.target.id == 'field01' ) {
this.field01 = newValue;
}
if( event.target.id == 'field02' ) {
this.field02 = newValue;
}
}
While this approach works, it feels like a workaround and could become unwieldy when dealing with multiple input fields. What would be the proper way to ensure seamless updates between Parent and Child components?