Super confused

[9mm]

Hey,

I am quite confused how this component works, perhaps due to the fact that it's not really clear where the actual value LIVES. Why in the docs is modelValue passed in and as a prop and not used or bound anywhere? It is like everything is a black box of how this works

I notice that by setting modelValue prop it somehow is picking that up despite not actually using it on the component.

How do I access the actual value that its binding to, in the same component without having to wrap it? I want vee + currency input to be in the same component.

That way currency-input holds the state, and when it changes i then send it to vee-validate (which doesont control the input, only the validation). I separate it into 2 states so it is clear the distinction. I think will update the currency input state if the vee validate changes

<template>
  <app-input
    ref="inputRef"
  />
</template>

<script>
import { toRef, watch } from 'vue';
import AppInput from '@/components/AppInput.vue';
import { useCurrencyInput } from 'vue-currency-input';
import { useField } from 'vee-validate';

export default {
  components: {
    AppInput,
  },
  props: {
    // modelValue: {
    //   type: String,
    //   default: null,
    // },
    name: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    const name = toRef(props, 'name');

    const {
      value,
      handleChange,
      handleBlur,
      errorMessage,
      meta,
    } = useField(name, undefined, {
      initialValue: '',
    });

    const {
      inputRef,
      numberValue,
    } = useCurrencyInput({
      locale: 'en-US',
      currency: 'USD',
      currencyDisplay: 'symbol',
      hideCurrencySymbolOnFocus: false,
      hideGroupingSeparatorOnFocus: false,
      hideNegligibleDecimalDigitsOnFocus: false,
      autoDecimalDigits: false,
      useGrouping: true,
      accountingSign: false,
    });

    watch(numberValue, value => {
      handleChange(value);
    });

    return {
      inputRef,
    };
  },
};
</script>

[9mm]

Here is my inner component (app-input) if this helps. I believe its pretty str8forward

    <input
      @input="onInput"
      :value="modelValue"
      v-bind="$attrs">

  methods: {
    onInput(event) {
      this.$emit('update:modelValue', event.target.value);
    },
  },

[dm4t2]

I just saw that there's an official VeeValidate integration example: https://vee-validate.logaretm.com/v4/examples/value-formatting/#currency-format-example

[hamanuha]

Hi,

thanks for your work and effort. It's a great extension.

Found this thread while trying to solve an issue I have with the example you mentioned.
When there is an initial value set by vee-validate then formattedValue (as used in the example) is always empty.
Just and empty input field is shown.

<input :id="name" ref="inputRef" :value="formattedValue" type="text" />

If I use the value I get from useField then the correct value is shown, but it's unformatted. When I then click on the input it is formatted. Is this a bug or do I miss something?

const { value, errorMessage, handleChange } = useField(props.name)
<input :id="name" ref="inputRef" :value="value" type="text" />

[hamanuha]

Solved it by wrapping the input field in another sub component and using v-model="value" on it.
Seems like the currency input only works with v-model used.