Hi, thanks for creating this component. I was wondering if it would

Feature request: integer model about vue-currency-input HOT 2 CLOSED

dm4t2 commented on September 10, 2024

Feature request: integer model

from vue-currency-input.

Comments (2)

slipszenko commented on September 10, 2024

I've managed to achieve the effect that I was after with the following code:

<template>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">{{ currencySymbol }}</span>
    </div>
    <currency-input
      :value="initialValue"
      :currency="{ prefix: '' }"
      :locale="$i18n.locale"
      @input="emitChangeInCents"
      class="form-control pr-1 border-radius-box-right" />
  </div>
</template>

<script>
import { CurrencyInput } from 'vue-currency-input';

export default {
  props: {
    value: Number,
    currencySymbol: String,
  },
  data() {
    return {
      // Value must be passed vue-currency-input as dollars/euros/etc.
      initialValue: this.value / 100,
    };
  },
  methods: {
    emitChangeInCents(newValue) {
      // We must return the value in cents
      let valueInCents = 0;

      if (newValue !== null) {
        valueInCents = parseInt((newValue * 100).toFixed(0), 10);
      }

      this.$emit('input', valueInCents);
    },
  },
  components: {
    CurrencyInput,
  },
};
</script>

Thanks!

from vue-currency-input.

jonasesr commented on September 10, 2024

This would be a cool feature. You have to keep in mind that not every language has 2 fraction digits. Regarding to this list: https://www.currency-iso.org/dam/downloads/lists/list_one.xml there are several currencies with 3 or 4 fraction digits. A very nice feature would be to set the property valueAsInteger and parses it based on the minimumFractionDigit Option of the Intl.NumberFormat

        const formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)
        const options = formatter.resolvedOptions()
        let valueInCents = 0;

        if (value !== null) {
            valueInCents = Number.isInteger(value)
                ? value * Math.pow(10, options.minimumFractionDigits)
                : parseInt((`${value}`).replace('.', ''), 10);
        }

        this.$emit('input', valueInCents);

from vue-currency-input.

Recommend Projects