How can I change the value of a field?

[Vivi-Ornitier]

I'm Japanese, so I want to convert full-width numbers to half-width numbers.
For example, 1 to 1.
Rewriting the value of HTMLInputElement did not change the appearance or the actual value.

const onInput = (event: InputEvent, index: number) => {
  const element = event.target as HTMLInputElement;
  const convertedValue = convertFullNumberToHalfNumber(element.value);

  element.value = convertedValue; // <= not worked.
};

Can you tell me how to change it?
Thank you.

[logaretm]

Sorry I missed this. Not sure which API are you using. Can you create an example for this?

[Vivi-Ornitier]

@logaretm

Thank you for your reply.

An example is given below.

<script setup lang="ts">
const onInput = (event, field) => {
  field.setValue("foobar"); // <- TypeError: field.setValue is not a function
};
</script>

<template>

<Form>
  <Field v-slot="{ field }" v-model="lastName" name="name" rules="required">
    <input
      v-bind="field"
      type="text"
      required
      @input="onInput($event, field)"
    />
  </Field>
</Form>

</template>

I want to change the value automatically, but field.setValue doesn't work.
Also, what is the field type? I don't want to use any.

Thanks.

[logaretm]

You can grab handleChange from the scoped slot and pass it to the input handler function. If you need to get accurate TS support you should switch to useField in that case.

<Form>
  <Field v-slot="{ field, handleChange }" v-model="lastName" name="name" rules="required">
    <input
      v-bind="field"
      type="text"
      required
      @input="onInput($event, handleChange)"
    />
  </Field>
</Form>