Уже третий день пытаюсь решить эту задачу, уже начинаю сходить с ума.
Ситуация следующая: У меня есть страница с формой, где я определил поля (буду писать упрощенный код, без всего лишнего):
const companyForm = reactive({
ogrn: null,
inn: null,
})
Сами инпуты я сделал отдельным компонентом, куда передаю v-model и некоторые другие данные: (к слову, я использую библиотеку primevue, поэтому у меня в моем компоненте лежит компонент инпута от primevue, если это важно)
<u-input-field
id="ogrn"
v-model="companyForm.ogrn"
/>
<u-input-field
id="inn"
v-model="companyForm.inn"
/>
В моем дочернем компоненте (u-input-field) я принимаю v-model от родителя и связываю родителя и ребенка с помощью следующих действий (к слову, подсмотрел по гайду как это все сделать, но сам до конца и не понял как работает emits):
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
id: {
type: String,
required: true
},
modelValue: {
type: String,
required: true
}
})
const value = ref(props.modelValue)
watch(value, () => {
emits('update:modelValue', value)
})
<input-number
:input-id="props.id"
v-model="value" />
Все это отлично работает.
Далее мне нужно сделать так, чтобы при изменении значения в одном инпуте, менялось значение и в другом самостоятельно. Что я пробовал и как я думал это будет работать: (это я прописал в родителе, на странице формы)
watch(
() => companyForm.ogrn,
(newValue) => {
companyForm.inn = newValue
}
)
Но это не работает, ну то есть не до конца. Само значение companyForm.inn действительно изменяется, если наблюдать его через девтулс, однако в самом инпуте это значение не отрисовывается, я не понимаю как вызвать ререндер компонента.
К чему я пришел по итогу методом тыка - добавить в компонент с инпутом еще один watch, чтобы он отслеживал изменения сверху у companyForm.inn. Вот так теперь выглядит код компонента:
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
id: {
type: String,
required: true
},
modelValue: {
type: String,
required: true
}
})
const value = ref(props.modelValue)
watch(value, () => {
emits('update:modelValue', value)
})
watch(
() => props.modelValue,
() => {
emits('update:modelValue', value)
}
)
<input-number
:input-id="props.id"
v-model="value" />
И это работает! Кроме самого первого изменения инпута ogrn... На первое изменение ничего не происходит, а на последующие уже второй инпут дублирует значение первого, как я и ожидаю.
Помогите пожалуйста понять что я делаю не так и как решить эту проблему.