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?

A state management framework based on the flux pattern. I highly recommend learning about it and it will help you to avoid many of these types of rabbit holes you were finding yourself going down vuex.vuejs.org <-- give the video on that page a watch, it's only 5 minutes — maxshuty
– maxshuty, Commented Jan 25, 2021 at 13:08
@maxshuty please exxplain why vuex is required in solution of this problem — Ashwin Bande
– Ashwin Bande, Commented Jan 25, 2021 at 13:10
@ashwinbande I never said it was a required solution. However, if you're having issues managing state and you're not using Vuex, then it may be time to start looking at it. Sure it can add some extra boilerplate, but you can go down many rabbit holes once you start passing props down components several layers deep and using Vuex solves all of that mess. Unless the app is an extremely trivial app or a prototype then using Vuex can help the OP not only learn the flux pattern, but also help prevent these sorts of issues all together in the first place. — maxshuty
– maxshuty, Commented Jan 25, 2021 at 13:54
Even though it doesn't help for this case it's always nice to hear other options, thanks a bunch @maxshuty — TheLovelySausage
– TheLovelySausage, Commented Jan 25, 2021 at 13:58

Ashwin Bande · Accepted Answer · 2021-01-25 12:58:06Z

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>

answered Jan 25, 2021 at 12:58

Ashwin Bande

3,1232 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TheLovelySausage Over a year ago

Pardon my stupidity but where is the field parameter coming from in the changed method?

Ashwin Bande Over a year ago

changed($event, 'field01')

Ashwin Bande Over a year ago

In @emitChanged="changed($event, 'field01')" of input-text.

TheLovelySausage Over a year ago

That's amazing, is it possible to also include the newValue field as well? I'm unfamiliar with the syntax for including variables manually in an emit event

Collectives™ on Stack Overflow

Vue.js Dynamically Mapping Data Between Parent and Child Component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related