Vue.js передает объект родительскому компоненту

Мне сложно понять, почему я не могу отслеживать изменения своего дочернего компонента в родительском компоненте.

У меня есть настраиваемый компонент <v-address></v-address>, который содержит несколько полей ввода, чтобы пользователь мог ввести такой адрес:

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

Внизу я прислушиваюсь к изменениям:

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);
            }
        }
    }

Каждый раз, когда я меняю поле ввода, я хочу отправить весь объект адреса родительскому компоненту.

Когда я console.log(this.address) внутри inputChanged() метода, я получаю правильный объект со всеми доступными значениями.

Теперь я хочу создать такой объект: this. $ Emit ('address: change', this.address);

Используя vue devtools, я получаю правильный emit:  введите описание изображения здесь

В моем родительском компоненте я отслеживаю изменения в компоненте <v-address @address:change="changeAddress"></v-address>.

Затем в моем родительском компоненте я пытаюсь вывести эти изменения:

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

Когда я смотрю на консоль, я ничего не получаю. Даже жесткое кодирование строки в этой функции ничего не возвращает.

Что я делаю неправильно?


person Marcus Christiansen    schedule 27.09.2018    source источник
comment
Возможно, использование : вызывает некоторые синтаксические конфликты с использованием : для передачи данных (например, :prop="value"). Можете ли вы попробовать использовать другого персонажа или вообще не использовать персонажа?   -  person Lazar Ljubenović    schedule 27.09.2018
comment
Я все-таки пробовал с обычным кебаб-футляром, но безрезультатно.   -  person Marcus Christiansen    schedule 27.09.2018
comment
Не могли бы вы выложить репродукцию?   -  person Lazar Ljubenović    schedule 27.09.2018


Ответы (1)


Я обнаружил ошибку, которая возникла по моей вине.

Я добавил прослушиватель событий не в тот родительский компонент.

person Marcus Christiansen    schedule 28.09.2018
comment
Рад, что вы нашли решение своей проблемы :) - person Husam Ibrahim; 29.09.2018