Do you have any suggested methods for input formatted numbers in vee-validate?

[miladfa7]

i use vee-validate and vue currency Input for input formatted numbers.

two file:
CurrencyInput.vue

<template>
  <Field  class="form-control form-control-solid" ref="inputRef" type="text" :value="formattedValue" />
</template>

<script>
import { useCurrencyInput } from "vue-currency-input";
import { ErrorMessage, Field, Form } from "vee-validate";

export default {
  name: "CurrencyInput",
  components:{
    Field
  },
  props: {
    modelValue: Number,
    options: Object,
  },
  setup(props) {
    const { formattedValue, inputRef, setOptions,setValue } = useCurrencyInput(props.options);
    
    return { inputRef, formattedValue };
  },
};
</script>

Price.vue

  import CurrencyInput from "./CurrencyInput.vue";
  <CurrencyInput  v-model="data.price" options= options />

options={locale: 'en-US'}

I got the following error
Error:

Uncaught (in promise) TypeError: path is undefined
    getFromPath vee-validate.esm.js:154
    initialValue vee-validate.esm.js:964
    run reactivity.esm-bundler.js:160
    get value reactivity.esm-bundler.js:1088
    unref reactivity.esm-bundler.js:1001
    useFieldValue$1 vee-validate.esm.js:1075
    useValidationState vee-validate.esm.js:966
    useField vee-validate.esm.js:771
    setup vee-validate.esm.js:1180

Do you have any other suggested methods for input formatted numbers in vee-validate?

[logaretm]

I suggest using the composition API to do this, you mainly need to sync the value between vee-validate and vue-currency-input.

I have added an example to the docs here:

https://vee-validate.logaretm.com/v4/examples/value-formatting