Vue: Event не выдает несколько значений. Что-то не так с v-моделью?
Я новичок в Vue и пробовал настроить простое приложение, которое принимает некоторые пользовательские данные для отображения результата на дополнительной странице / компоненте. Компонент A имеет 2 ползунка. Я хотел бы передать оба значения компоненту C. В настоящее время передается только одно значение.
Я потратил на это несколько часов и уже получил очень ценную поддержку по другому вопросу от @RoboKozo, но это мешает мне двигаться дальше.
Пожалуйста, найдите мой текущий код здесь.
Ответы 3
Вы передаете значения local и local2 в ComponentA, но родитель (App.vue) не использует их для обновления value и value2 в своем data.
Последний должен быть передан как props в ComponentC для отображения:
ComponentA.vue:
evaluateForm(){
this.$emit('updateModelValue', this.local)
this.$emit('update2ModelValue2', this.local2)
this.$emit('saved')
}
App.vue:
<component
:is = "selectedComponent"
@updateModelValue = "val => value=val"
@update2ModelValue2 = "val => value2=val"
:modelValue = "value"
:modelValue2 = "value2"
@saved = "setSelectedComponent('ComponentC')"
/>
Я не знаю, почему вы решили использовать здесь :is, но если у вас есть только эти два дочерних компонента, лучше разделить их в шаблоне.
Привязать как реквизит, так и испускает
<component
:is = "selectedComponent"
:modelValue = "value"
:modelValue2 = "value2"
@update:modelValue = "value = $event"
@update2:modelValue2 = "value2 = $event"
>
</component>
Имя события для обновления модельного значения modelValue2 должно быть update:modelValue2 (не update2:modelValue2):
// ComponentC.vue
this.$emit('update:modelValue2', this.local2)
Затем, чтобы связать component.modelValue2 с App.value2, укажите modelValue2 в качестве аргумента привязки v-model:
<component v-model = "value" v-model:modelValue2 = "value2">
Обратите внимание, что вам не нужно указывать аргумент привязки для modelValue, потому что это значение по умолчанию.