0

Уже третий день пытаюсь решить эту задачу, уже начинаю сходить с ума.

Ситуация следующая: У меня есть страница с формой, где я определил поля (буду писать упрощенный код, без всего лишнего):

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... На первое изменение ничего не происходит, а на последующие уже второй инпут дублирует значение первого, как я и ожидаю.

Помогите пожалуйста понять что я делаю не так и как решить эту проблему.

1 ответ 1

0

Вам нужно отслеживать изменение инпутов не в них самих, а в родительском компоненте.

Типа такого:

const companyForm = reactive({
  ogrn: null,
  inn: null,
})


const INN = toRef(companyForm, "inn")

watch(INN, (val) => {
        companyForm.ogrn = val
      })

Пример на Vue SFC Playground


UPD Кастомный инпут:


<template>
  <div>
        <input :id="id" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
  </div>
</template>

<script setup>
  import {defineProps} from "vue"

  const props = defineProps({
    id: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      required: true
    }
  })
</script>

2
  • Это не сработало в моем случае, потому что у Вас инпуты находятся прямо в родителе, а у меня инпуты внутри дочерних компонентов
    – NDMX
    8 апр в 13:03
  • @NDMX, я тестил на кастомных инпутах. Как бы предполагалось, что когда вы логику в родителя будете переносить, нужно будет еще и кастомные инпуты править. Добавил код кастомного инпута в пример.
    – RAMe0
    8 апр в 14:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.