Field value doesn't change

[lebadapetru]

BaseInput:

<template>
  <input
      :type="type"
      :class="styleClasses"
      :name="name"
      :id="name"
      :value="inputValue"
      :placeholder="placeholder"
      :autocomplete="autocomplete"
      @input="onInput"
      @blur="handleBlur"
  />
</template>

<script>
import { useField } from 'vee-validate'

export default {
  name: "VBaseInput",
  props: {
  //props
  },
  emits: ['update:modelValue'],
  setup(props, {emit}) {
    const {
      value: inputValue,
      errorMessage,
      handleBlur,
      handleChange,
      meta,
    } = useField(props.name, props.rules, {
      initialValue: props.modelValue,
    });

    const onInput = (event) => {
      handleChange(event)
      emit('update:modelValue', event.target.value);
    }

    return {
      onInput,
      handleChange,
      handleBlur,
      errorMessage,
      inputValue,
      meta,
      capitalize
    }
  },
}
</script>

Parent:

<template>
   //<form ....
   <VBaseInput
                      :type="'number'"
                      :name="'discount'"
                      :modelValue="discount"
                      @update:modelValue="filter"
   />
</template>

<script>
//imports

export default {
  name: "ParentForm",
  setup() {
   const state = reactive({
                discount: 0
      })
    return {
     ...toRefs(state),
     filter: (value) => {
        if (parseInt(value) <= 100) {
          state.discount = value
        }
      }
    }
  },
}
</script>

The discount reactive property can have an initial value, which propagates just fine to the useField() in my VBaseInput, also if i change it, the new value updates in the child and also in the ParentForm reactive prop as you would expect.If i manually change it, as i do in the filter, the useField()'s value from the child completely ignores the modelValue prop's value.

Kind of acceptance criteria: User type 12 in the input, the ParentForm reactive prop changes to 12 and it propagates to the VBaseInput through the :modelValue bind which also changes the inputValue that comes from useField().
If the user types 123 which is higher than 100, the discount prop remain at 12, the modelValue has 12 too but the inputValue has 123 ( as the input itself ) so i'm guessing it only looks at the event.target.value that i'm passing through handleChange(event) ?
Is there any way i can make it watch the modelValue?

Can anyone give me some assistance here, please?

Update: example here

[lebadapetru]

Anyone?

[lebadapetru]

I've made an example forked from the vee validate custom inputs example. Change the input value and it should replace it with 'worked' but it doesn't

[logaretm]

Not sure if I'm following correctly, so to recap you want the input value to have two-way binding, meaning the parent can change the value and the child input should be able to pick up the new value with modelValue prop.

Your usage of handleChange is correct, but you need to watch the modelValue yourself and update the model inside vee-validate, so something like this should work:

const {
  value: inputValue,
   // ....
 } = useField(props.name, props.rules, {
   initialValue: props.modelValue,
});

// sync the model value with vee-validate's value
watch(() => props.modelValue, value => {
  inputValue.value = value;
});

I would have updated your example but it seems to be missing a lot of stuff, like it doesn't even use handleChange

[lebadapetru]

Yep, that's exactly what i need. Thank you

[imShara]

Is there way to make two-way binding without wathcing? Just bind whole model to form, e.g:

const reactiveValues = reactive({ name: 'John' })

const { meta, errors, handleSubmit } = useForm({
  validationSchema,
  values: reactiveValues
})