Vue.js Dynamically Mapping Data Between Parent and Child Component

Question

I feel like I am about to go down a path of extreme inefficiency when trying to keep data correctly mapped between a Parent and Child component.

If I have a simple Child Vue element like 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 have a Parent Vue element like below, it is binding data to the Child elements. The problem is that it seems to be only binding from the Parent to the Child, the Parent data is not updating

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>

I am able to update the Parent data with whatever the data the Child returns by changing the changed method to the below

changed(event, newValue) {
    console.log(newValue);
    if( event.target.id == 'field01' ) {
        this.field01 = newValue;
    }
    if( event.target.id == 'field02' ) {
        this.field02 = newValue;
    }
}

This feels like a hack though and will become unmanageable should there be many input fields. What is the correct way to reupdate the Parent data?

Answer 1

This is why the v-model is useful, you can change your code in following way to overcome your problem without using v-model . but I would recommend try to implement v-model way.

<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) { this.$emit('emitChanged', event); }
    }
</script>

<input-text name="field01" v-bind:value="field01" @emitChanged="changed($event, 'field01')"></input-text>
<input-text name="field02" v-bind:value="field02" @emitChanged="changed($event, 'field02'"></input-text>

<script>
    import inputText from "./common/InputText.vue";
    export default {
        data() {
            return() {
                field01: '',
                field02: ''
            }
        },
        components: {
            input-text: inputText
        },
        changed(event, field) {
            this[field] = event.target.value
        }
    }
</script>