Vue.js испускает объект в родительский компонент - PullRequest
Новая
       34

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

0 голосов
/ 27 сентября 2018

У меня проблемы с выяснением, почему я не могу прослушать изменения от моего дочернего компонента в моем родительском компоненте.

У меня есть пользовательский компонент <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: enter image description here

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

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

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

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

Что я делаю не так?

1 Ответ

0 голосов
/ 28 сентября 2018

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

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

...