Мне сложно понять, почему я не могу отслеживать изменения своего дочернего компонента в родительском компоненте.
У меня есть настраиваемый компонент <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);
}
}
Когда я смотрю на консоль, я ничего не получаю. Даже жесткое кодирование строки в этой функции ничего не возвращает.
Что я делаю неправильно?
:
вызывает некоторые синтаксические конфликты с использованием:
для передачи данных (например,:prop="value"
). Можете ли вы попробовать использовать другого персонажа или вообще не использовать персонажа? - person Lazar Ljubenović   schedule 27.09.2018