Vue.js emitting object to parent component

Question

I'm having trouble figuring out why I cannot listen for changes from my child component in my parent component.

I have a custom <v-address></v-address> component which contains several input fields for a user to enter an address like so:

<v-text-field
  v-model="address.address_line_1"
  label="Street Address"
  required
  @change="inputChanged">
</v-text-field>

Down below I listen for changes:

import { mapGetters, mapActions } from 'vuex';
    export default {
        data() {
            return {
                address: {
                    address_line_1: '',
                    address_line_2: '',
                    city: '',
                    province: '',
                    postal_code: ''
                }
            }
        },
        computed: {
            ...mapGetters([
                'getProvinces',
            ]),
        },
        methods: {
            inputChanged() {
                this.$emit('address:change', this.address);
            }
        }
    }

Every time I change an input field, I want to send the entire address object to the parent component.

When I console.log(this.address) inside the inputChanged() method I get the correct object with all the available values.

I now want to emit the object like so: this.$emit('address:change', this.address);

Using vue devtools I get the correct emit:

In my parent component I listen for changes in the <v-address @address:change="changeAddress"></v-address> component.

In my parent component I then try to do output those changes:

methods: {
   ...mapActions([
       'setE6',
   ]),
   changeAddress(value, event) {
       console.log(value);
   }
}

When I look at my console, I get absolutely no output. Even hard-coding a string in that function returns nothing.

What am I doing wrong?

It could be that usage of : is causing some syntax conflicts with using : for passing in data (like :prop="value"). Can you try using a different character, or no character at all? — Lazar Ljubenović

Marcus Christiansen Marcus Christiansen · Accepted Answer · 2018-09-28T06:50:52

I found the error which was due to a mistake by me.

I added the event listener to the wrong parent component.

Vue.js emitting object to parent component

1 Answers