phiny1 / v-currency-field Goto Github PK

I get the following error when I use v-on:keyup.enter in the : Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'type')"

If you run the demo with the last version (3.0.10) the append slot do nothing. Same thing for 3.0.7.

Simple as that, change event is called two times when value changed

I've followed the installation instructions several times but get this message when using in a component.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Do I need an import statement?

Using vuetify 2.6.13 with vue 2.7.14

Hi, I'm using the 3.0.6 version of v-currency-field, the issue I'm having is that I have a rule that checks if the input is greater than 0 in a form, if it is not, the label turns to a red color. However, I want this to happen only when the user has clicked the save button, not from the start.

This is what looks like when the page loads, the label of "Peso Máximo" should be black as the one in "Serie".
My code looks like this:

Thank you!!

Consider using the v-bind="$props" for props received in the component and passed ahead untouched to v-text-field. For example:

         :flat="flat"
         :fullWidth="fullWidth"
         :label="label"

The component can be simplified as:

  <v-text-field
         ref="textfield"
         v-bind="$props"
         :class="`${classes}`"
         :value="formattedValue"
         type="tel"
         @change="change"
         v-currency="{precision, decimal, thousands}"/>

https://codepen.io/phiny1/pen/YzPLOam
Just try to set init value: 12345.56, and set locale to 'de-DE'
I expect to see : 12.345,56
but instead, I see 12.345.56 (with a dot but must be a comma) and when focus event is happend i will see 1234556 ! (without any separators)

Only with en-US works fine
Thanks

Hi,

So followed the guide to implement, yet when running a npm run dev with laravel mix, I receive the following console errors.

Running npm run production, the errors are gone (perhaps silent from the production).

My app.js:

import currency from 'v-currency-field';
Vue.use(currency);

new Vue({
    data() {
        return {
            currency_config: {
                decimal: ',',
                thousands: ' ',
                prefix: 'R ',
                precision: 0,
                min: null,
                max: null,
                masked: false,
            },
            currency_config_no_decimals: {
                decimalLength: 0,
                thousands: ' ',
                prefix: 'R ',
                precision: 0,
                min: null,
                max: null,
                masked: false,
            },
        }
    },

My .vue file:

<v-currency-field
    class="title-branding"
    label="Monthly income"
    v-model="client.monthly_income"
    v-bind="$root.currency_config_no_decimals"
    type="tel"
    :rules="[
         v => parseFloat(v) > 0 || 'Monthly income cannot be zero',
         v => parseFloat(v.toString().replace(',', '')) >= 20000 || 'Minimum income of R20 000'
    ]"
    :autocomplete="'new-password'"
    :disabled="checking"
></v-currency-field>

Hi.

When marking a v-currency-field as clearable (e.g. <v-currency-field clearable />) and clicking on its "clear" button, the content is restored from previous model value when exiting the focus from the component, however, it should be zeroed.

cheers

Maybe related to: #35

Error: Cannot read property 'indexOf' of null at line 128 of v-currency-field.js

In component:
<v-currency-field :label="label" v-model="myNullValue" ></v-currency-field>

In main.js:
`
import currency from 'v-currency-field'

Vue.use(currency, {
locale: 'pt-BR',
prefix: '$',
decimalLength: 2,
autoDecimalMode: true,
min: null,
max: null,
defaultValue: null
})`

The version I'm using is 3.0.5

After vuetify's last update, v-currency-field is not converting to html, for example a v-container, it becomes

Hi there,

How can I use it in vue.js 2.x with typescript??
When I import it from main.ts it will say:
TS7016: Could not find a declaration file for module 'v-currency-field'.

Steps to reproduce:

1. Open https://codepen.io/lakueyg/pen/QWNQrYy
2. Place your cursor in the input
3. Type characters -, 4, 2

Expected: -$42.00
Actual: -$0.00

When using vite I am getting the following error

RollupError: "VCurrencyField" is not exported by "node_modules/vuetify/lib/index.js"
imported by "src/views/TaxForms/1099.vue?vue&type=template&lang.js".

My vite.config.js looks like

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import path from 'path';

export default defineConfig({
	plugins: [
		createVuePlugin(),
		Components({
			resolvers: [				
				VuetifyResolver(),
			],
		}),
	],
	resolve: {
		alias: [
			{
				find: '@',
				replacement: path.resolve(__dirname, 'src'),
			},
			{
				find: '~',
				replacement: path.resolve(__dirname, 'node_modules'),
			},
		],
	}
});

Does anyone know how to solve this issue?

If I wrap the v-currency-field in another component and pass the slots to the parent component, then they don't work. The same works with the v-autocomplete.

<template>
  <ValidationProvider
    v-slot="{ errors, valid }"
    :name="$attrs.label"
    :rules="rules"
    :vid="vid"
    slim
  >
    <v-currency-field
      v-model="innerValue"
      :error-messages="errors"
      v-bind="$attrs"
      :class="[{'required' : required}]"
      v-on="$listeners"
    >
      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope" />
      </template>
    </v-currency-field>
  </ValidationProvider>
</template>

<script>

export default {
  name: 'KVCurrencyField',
  props: {
    rules: {
      type: [Object, String],
      required: false,
      default: ''
    },
    vid: {
      type: String,
      required: false,
      default: ''
    },
    value: {
      type: [Number, String],
      default: 0
    }
  },
  data: () => ({
    innerValue: 0
  }),
  computed: {
    required () {
      const typeRules = typeof this.rules
      let res = false
      if (typeRules === 'string') {
        res = this.rules.includes('required')
      } else if (typeRules === 'object') {
        res = this.rules.required
      }
      return res
    }
  },
  watch: {
    // Handles internal model changes.
    innerValue (newVal) {
      this.$emit('input', newVal)
    },
    // Handles external model changes.
    value (newVal) {
      this.innerValue = newVal
    }
  },
  created () {
    this.innerValue = this.value
  }
}
</script>

In next code slots not work

 <KVCurrencyField
            v-model="form.counter"
            :readonly="!isEditingCounter"
            label="Текущий номер"
            :decimal-length="0"
            dense
          >
            <template v-slot:append-outer>
              R$
            </template>
          </KVCurrencyField>

Hi.

The v-currency-field model should be cleaned after a this.$refs.form.reset(); like v-text-field.

cheers

using vuetify 2.3.x, I am using v-edit-dialog to modify table values as specified in https://vuetifyjs.com/en/components/data-tables/#content-editing

however when i swap v-text-field for v-currency-field, the value isn't bound to the v-model when pressing enter.

This is more of a feature request, but currently the field in its default state always shows "$0.00" and does not display what placeholder text is set too. It's really confusing for users filling out the input as it does not look like it is required.

I can come up with a jsfiddle if you would like, but since it's pretty simple I thought I would just describe it.

When using the component with 'autoDecimalMode' on, pasting values (either formatted with ',' or plaintext numbers) ends up producing incorrect values. With autoDecimalMode off, it works as expected.

I can see why this happens, I'm just wondering if there's a workaround or easy fix to get this functionality b/c it kinda breaks the ability to use autoDecimalMode in our application, which I would like to leverage.

edit:
i've noticed this only happens when value as integer is false... i.e., when there are decimals. seems to basically slice the last 2 numbers and place them as decimals

• i.e., paste 1,500,000 -> 15,000

The 'hide-details' prop for Vuetify v-text-field does not work for v-currency-field.

Nice work though, does everything i need it to otherwise!

Hey guys, i added the component in my nuxt project, flowing guide steps, but I get this erro in browser console, and when v-model data just have a float number steed the field keep in '0,00' or blank, anyone can help me? thanks.

My nuxt.config,js

  modules: [
    '@nuxtjs/pwa',
    ['v-currency-field/nuxt-treeshaking', {
      locale: 'pt-BR',
      decimalLength: 2,
      autoDecimalMode: true,
      min: null,
      max: null,
      defaultValue: 0,
    }],
  ],

The stack trace
v-currency-field.esm.js?a563:393 Uncaught RangeError: Maximum call stack size exceeded.
at dispatchEvent$1 (v-currency-field.esm.js?a563:393)
at format (v-currency-field.esm.js?a563:717)
at applyFixedFractionFormat (v-currency-field.esm.js?a563:656)
at HTMLInputElement.eval (v-currency-field.esm.js?a563:775)
at dispatchEvent (v-currency-field.esm.js?a563:112)
at input (v-currency-field.esm.js?a563:1078)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2175)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)

Hi,

I'm trying to create a form which will be used for Create and Update. When Update, the fields will be filled in using v-model. This is done using vuex in combination with vuex-map-fields to provide the getters and setters for these computed properties.

The v-model binding works when I input a value in the currency field, but not when the v-model already has a value, the currency field uses it's default value. Binding :default-value="value" doesn't work either.

This does work with the normal v-text-field.

My config:

The component:

Vuex:

Hope this is an easy fix, thanks in advance!
And please let me know if I'm doing something wrong.

Even with option autoDecimalMode set to true, v-currency-field is setting value multiplied by 100. Removing dots and commas from the number.

0,55 becomes 55,00.

Version: 3.1.0
Bug version: 3.0.8

Vue.use(VCurrencyField, { 
  locale: 'pt-BR',
  currency: "BRL",
  decimalLength: 2,
  autoDecimalMode: true,
  min: null,
  max: null,
  defaultValue: 0
})

It works in development mode, but in production, the input field does not appear and the console shows the following errors.

Error: "No input element found"
TypeError: "this.$refs.textfield.resetValidation is not a function"

"nuxt": "^2.0.0",

I tried to use the v-currendy-field as plugin and as a module too

Hello,

Is it possible to add the value-as-integer option since your package is using the Vue-Currency-Input?

I am handling currencies trough dinero.js which uses integers instead of floats or decimals.

If this is not possible, I will close this issue

I'm trying to use the component as a directive, but seems that the vuetify lose the reactivity when used with v-currency. I need to update several other fields when one value changes.

https://codepen.io/paulodiogo/pen/rNNLQQw?editors=1010

Hi,
Trying to prepend with a v-icon, but can't make it work.
Are you exposing slots?

`
<v-currency-field
label="Annual base salary"
single-line
:error-messages="cashMonies.errors"
v-model="cashMonies.amount"

mdi-currency-usd
USD

`

I am trying to type 36.5 and then it change to 37

import VCurrencyField from 'v-currency-field';
Vue.use(VCurrencyField, {
locale: 'es-MX',
decimalLength: 2,
autoDecimalMode: false,
min: null,
max: null,
defaultValue: 0.00,
valueAsInteger: false,
allowNegative: true
});

I'm using v-currency to set subscription fee, so the value can't be negative, I could compute the data as it changes but the plugin offers the prop allow-negative that isn't working.

Hey everyone,

I think that have a way to ser defaults suffix n/or prefix in plugin options object is a good new feature, no?
I am willing to implement it :)

Hi, great library i am recently used it
I want to remove .00 in the printed value for integer
example:
$15.00 to $15
SGD 3715.00 to SGD 3715
Rp 15.000.00 to Rp 15.000

here is my component

                                <v-currency-field
                                  label="Jumlah"
                                  v-model="transaction.amount"
                                  decimal-length="0"
                                  value-as-integer=true
                                  prefix="Rp. "
                                  />

is there solution for this?
Thank you

Hi, two weeks ago, I have an input with v-currecy-field thas works when I entry some value, this value reflect in another input automatically, but I don't know why. Since the last version this doesn't work, it's an easy code

Just assign value from v-model to another v-model variable:

v-model = "inputOne"
@input="mirrorInput()"

v-model = "inputTwo"

mirrorInput() {
this.inputTwo = this.inputOne
]

That works but only assign value in model, but input field doesn't change. Is always null, but I repeat two weeks ago worked, I don't know if any changes from the last release have relation with this ( I saw in the last commit one prop named "currrency" with "3 r" maybe it's an error, I don't know

Thanks.

I'm curious if there are plans to support Vuetify v3 (and Vue 3). Not sure if this is the right channel to ask here... Thank you for your support.

cant use this.$refs.form.reset()

Is there a way to display decimal points if needed? for more detail look at the following examples (used 3 decimal points):

Edit
Is there a way to remove ending zero decimal points like the above table 👆

Hi there!

The initial value is not formatted in latests versions: code.
It was working in version 3.0.9.

Thanks!

data() {
return {
formattedValue: this.defaultValue,

see: https://codesandbox.io/embed/vue-template-b3u5c?fontsize=14&hidenavigation=1&theme=dark

Hi

I'm not sure why but the value is not changing when I update the variable configured on v-model.

Ex.

When I update fields.receiptAmount to anything the value on the textfield does not update.

Any ideas?

Thanks!

Hi! This is just what I needed! But I have a question, why the punctuation only show in numbers from 10 thousand?

this is my nuxt config file:

modules: [
 ...
    [
      'v-currency-field/nuxt',
      {
        locale: 'es-CL',
        decimalLength: 0,
        autoDecimalMode: true,
        min: null,
        max: null,
        defaultValue: 0,
        valueAsInteger: true,
        allowNegative: false
      }
    ]
  ],

Thank you

Greetings colleagues, I find myself playing with nuxt, vuetify and the v-currency-field/nuxt component, when running my application in dev mode (npm run dev) the component renders perfectly, but when running it in production (npm run build and npm run start), the component is not displayed, and I get the following error:

My nuxt configurations are as follows:
package.json

{
  "name": "myapp",
  "version": "0.4.0-SNAPSHOT",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "tests": "wdio wdio.conf.js",
    "tests:spec": "wdio wdio.conf.js --spec"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "cookie": "^0.4.1",
    "core-js": "^3.9.1",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.15.3",
    "nuxt-typed-vuex": "^0.2.0",
    "v-currency-field": "^3.1.1",
    "vuex-persistedstate": "^4.0.0"
  },
  "devDependencies": {
    "@mdi/font": "^7.0.96",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "@types/cookie": "^0.4.1",
    "@types/js-cookie": "^2.2.7",
    "@wdio/cli": "^7.7.4",
    "@wdio/local-runner": "^7.7.4",
    "@wdio/mocha-framework": "^7.7.4",
    "@wdio/spec-reporter": "^7.7.3",
    "babel-core": "7.0.0-bridge.0",
    "eslint-plugin-wdio": "^7.4.2",
    "webdriverio": "^7.7.4"
  }
}

nuxt.config.js

module.exports = {
  head: {
    title: "myapp",
    htmlAttrs: {
      lang: 'es'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  css: [
    '@mdi/font/css/materialdesignicons.min.css'
  ],

  plugins: [
    '~/plugins/api-resources/plugin',
    '~/plugins/axios',
    '~/plugins/persisted-store/plugin',
    '~/plugins/vuetify-theme',
    '~/plugins/utils/plugin',
  ],

  components: false,

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/vuetify',
    'nuxt-typed-vuex',
    '@nuxtjs/moment',
  ],

  modules: [
    '@nuxtjs/axios',
    ['v-currency-field/nuxt', {
      locale: 'en-US',
      decimalLength: 2,
      autoDecimalMode: false,
      min: null,
      max: null,
      defaultValue: 0,
      valueAsInteger: false,
      allowNegative: true
    }],
  ],

  axios: {
    baseURL: process.env.API_URL
  },

  moment: {
    defaultLocale: 'es',
    locales: ['es']
  },

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    iconfont: 'mdi',
    defaultAssets: { font: false, icons: false },
    theme: {
      dark: false,
      options: {
        customProperties: true
      },
      themes: {
        light: {
          background: "#f3f1f1",
          ground: '#fdfdfd',
          primary: "#2962FF",
          error: '#ff4743',
        },
        dark: {
          background: "#022d38",
          ground: '#024354',
          primary: '#0db972',
          error: '#ff6c68',
        },
      }
    },
  },

  build: {
  },

  server: {
    host: process.env.HOST
  },

  router: {
    middleware: []
  },
}

in plugin.js change
import VCurrencyField from 'v-currency-field';
insted of
import VCurrencyField from 'currency-field';

Hi,

It seems like calling resetValidation() on a form acts as if reset() was called instead. resetValidation() should only clear validation error messages without clearing the components' value...

First off, thank you for your work on this component! 🎉

I've been experiencing issues with versions of Safari < 13. The field does not work (does not validate or run any formatting, etc.) and the browser console is littered with issues about .formatToParts is not a function.

It appears to be caused by this: dm4t2/vue-currency-input#109. Reverting to version 3.0.3 (which uses a version of vue-currency-input that doesn't require the polyfill) fixes the issue. The good news is, the latest version of vue-currency-input no longer requires the polyfill (dm4t2/vue-currency-input@a87d477) so updating v-currency-field to use the latest version of vue-currency-input should fix it.

Would you mind running an install and creating a new release so we can pull in the latest version of vue-currency-input? If you're busy I could create the PR.

Thanks!

Min not working in directive mode. When I changed input type to number, I got this error:
vendors.app.js:9765 Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

Hi.

Some screen readers (e.g. Orca, NVDA) are reporting the v-currency-field as telephone type, but it should be numeric type.

cheers

Hello, good day.
I registered the event but it didn't work, below is my code.

env:
"vue": "^2.5.17",
"vuetify": "^1.3.12",
"v-currency-field": "^3.0.6",

main.js
import VCurrencyField from 'v-currency-field'
Vue.use(VCurrencyField, {
decimalLength: 0,
autoDecimalMode: true,
min: null,
max: null,
})

Usage:
<v-currency-field label="% giảm giá"
v-model="product.SalePercent"
class="text-right"
append-icon="%"
@keyup="salePercentInput"
@blur="salePercentInput"
ref="test2"
data-vv-name="% giảm giá"
:error-messages="errors.collect('% giảm giá')"
v-validate="'max_value:100'" />

methods:
salePercentInput: function () {
alert();
},

Thanks

Hi, thanks for providing this component! Note: locale=en for this report...

Our users would like to be able to type "1234.56", ie, explicitly type the decimal point in its natural position, and see displayed "1,234.56" in the text field, ie, have the group separator appear in the correct position. (And if they type "1234", then they want to see displayed "1,234" or "1,234.00" in the text field.)

However, the computed property here forces the value of distractionFree to be based on autoDecimalMode. The consequence is that hideGroupingSymbol is forced to be true, regardless of how we have configured it.

There doesn't seem any reason for the showing of the group separator to be tied to the chosen decimal mode.

Please can you change the behaviour such that we are able to control whether the group separator appears independently from the decimal mode?

I get the following error with boiler plate setup from the README.md:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <v-text-field> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Money>

[Vue warn]: Error in directive currency bind hook: "TypeError: Cannot read property 'length' of undefined"
found in
---> <Money>

For some reason after the last update, I started to get the following errors when inputting a number

v-currency-field.esm.js?a563:187 Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
    at setCaretPosition (webpack-internal:///./node_modules/v-currency-field/dist/v-currency-field.esm.js:191:13)
    at HTMLInputElement.el.addEventListener.capture (webpack-internal:///./node_modules/v-currency-field/dist/v-currency-field.esm.js:617:9)

And when surpassing the million digit, this one:

v-currency-field.esm.js?a563:587 The specified value "2.222.222" cannot be parsed, or is out of range.

I'm using nuxt v2.14.6 and this is those are the settings:

[
      'v-currency-field/nuxt',
      {
        locale: 'pt-BR',
        decimalLength: 0,
        autoDecimalMode: true,
        min: null,
        max: null,
        defaultValue: null,
        valueAsInteger: true,
        allowNegative: false
      }
]

Thank you!