vue-currency-input

vue-currency-input copied to clipboard

Vue Currency Input version

3.0.5

Vue version

2.7.10

What browser are you using?

Chrome

What operating system are you using?

OSX

Reproduction link

https://example.com

Describe your issue

Hi! I've setup according to the guide, I created a CurrencyInput.vue component with the following content:

<template>
  <input ref="inputRef" type="text" class="input__input" />
</template>

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

export default {
  name: 'CurrencyInput',

  props: {
    value: {
      type: Number,
      default: 0,
    },
    options: {
      type: Object,
      default: () => {
        return {
          currency: 'EUR',
        }
      },
    },
  },

  setup(props) {
    const { inputRef } = useCurrencyInput(props.options)

    return { inputRef }
  },
}
</script>

I then use it in my other component: <currency-input ref="inp" id="input-price" :v-model="price" placeholder=" " @change="priceChanged" />

But @change is never called, so no emits. What am I doing wrong here? It clearly states the following in the guide:

By default, the number value is automatically emitted on each input

See https://dm4t2.github.io/vue-currency-input/guide.html#lazy-value-binding for using a lazy value binding.

See https://dm4t2.github.io/vue-currency-input/guide.html#lazy-value-binding for using a lazy value binding.

Thank you for replying, but that does not work either. When I use the following code: <currency-input ref="inp" id="input-price" :value="price" placeholder=" " @change="value = $event" /> nothing is passed along/emitted. price is initially 10, but it is not passed to the input. When the input is rendered, it's empty. And nothing is emitted. Im using Vue2 and Nuxt, see specs above.

Can you share a minimal reproduction? Thanks!

Just encountered the same. Using these:

nuxt: 2.17.3
vue: 2.7.16
vue-currency-input: 3.1.0

Here is minimal reproduction: https://codesandbox.io/p/devbox/nuxt-2-17-vue-currency-input-not-emitting-rrwg2h?file=%2Fcomponents%2FCurrencyInput.vue%3A2%2C34

Any workarounds? @dm4t2 @BorisKamp Thanks in advance!

The useCurrencyInput composable seems to be broken with Vue 2.7 & Nuxt. Besides that auto emit doesn't work, the numberValue ref is also not reactive and thus can be not used with a watcher to handle emits manually.

As a workaround you can use intl-number-input:

<template>
  <input
    ref="inputRef"
    type="text"
  >
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { NumberInput } from 'intl-number-input'

export default defineComponent({
  name: 'NumberInput',
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  emits: ['input'],
  setup (props, { emit }) {
    let numberInput
    const inputRef = ref(null)
    onMounted(() => {
      if (inputRef.value) {
        numberInput = new NumberInput({
          el: inputRef.value,
          options: {
            formatStyle: 'currency',
            currency: 'USD'
          },
          onInput: (value) => {
            emit('input', value.number)
          }
        })
        numberInput.setValue(props.value)
      }
    })

    return { inputRef }
  }
})
</script>