vuejs-tips / v-money Goto Github PK

Hello! How i block negative numbers?

I get the following warning when using computed get and set on a component.

[Vue warn]: You may have an infinite update loop in a component render function.
found in
---> Money

Code:

<money v-model="fixedCostX"></money>

computed: {

   fixedCostX: {
      get () {
         return this.fixedCost;
      },
      set (value) {
         this.$store.commit('updateFixedCost', {  fixedCost: value });
       }
    },
}

Also using Vuex.

I'd like to have input for human readable dollar amounts like $1,234.50' with underlying value: 1234.5`.
Right now, using the component form I can get that except the underlying value will be the formatted version:

               moneyFormat: {
                    precision: 2,
                    masked: true /* doesn't work with directive */
                }

I'd be nice if we could have a apply: {toModel: true/false, toView: true/false} flag instead of the mask flag, with the effect:

• apply: {toModel} - shows unmasked numbers, converts to string in the model: 1 -> '$1.00'
• apply: {toView} - shows masked numbers, converts to number in the model: $1.00 -> '1'
• apply: {} - pass-thru: 1 -> 1
• apply: {toModel, toView} - shows masked numbers, saves masked output to model: $1.00 -> '$1.00'

I have dynamic fields that come from the database and they may or may not be money type.
Can it be optional if I pass NULL value or something like that?

<input type="tel" Why is used type tel, wouldn't be more appropriate to use type 'number'?

Is it possible to use placeholder text instead inside the input of just displaying the default model value?

I have a request for enhancement in documentation:
What I can't figure out is how to use it as a directive but set it up to use it globally.

Explanation usage at A is only the component I think.

Thanks so much.

When check on v-money, how to make cursor appear on at the clicked position.

For example, when I click at the front of the box, the cursor should appear at the front.

However, at the moment, when v-money is focused, the cursor always on the back.

Is there an option to make cursor appear at the clicked position like vue-the-mask?

Thanks.

Dear maker of this wonderful extension.
I am trying to use the input mask as a Vue Filter.
I haven't been able to figure out how yet.

Could / would you add this functionality for us?

Thank you SO MUCH!

Are there any way to work with negative values (pressing the minus key) ?
Thanks a lot.

To use v-money in directive form, you must not do:

directives: {VMoney}

...but...

directives: {money: VMoney}

...instead.

Great package!

It's often useful to represent currency values in minor units of the currency, especially because JS can behave so oddly with floating points.

I personally prefer to store all currency values as minor units (e.g. a user will input £123.45 but I will store the value as 12345). This makes life easier if you need to manipulate the value somehow, especially interacting with another floating point value.

Would you consider adding this functionality to this component? The option could be something like minorUnits: true. For the most part this would just involve multiplying the value by 100, though there are some currencies with non-centesimal minor units so perhaps if a non-boolean value is supplied for minorUnits option, the value would be multiplied by that number instead - useful e.g. for the Omani rial, which is divided into 1000 baisa).

I would be happy to have a crack at a PR if you'd consider adding this.

See: https://jsfiddle.net/nj3cLoum/8/

Input should show 123 but shows 1,23

Is there a way you can add an option of setting the value to null when you focus on the input? The 0 alone is causing multiple issues for our users. In some cases the cursor is in front of the 0 which isn't helpful, and in others, they try to delete the zero before typing.

Basically, if the value is 0 on focus, the input numbers should clear. If the value is null on blur, it should go back to 0.

Hi, I'm using vue for a single page to resolve one simple problem.

The problem is that all the examples are using imports, and I cannot use that.

I need to use the plugin without using the imports, like this plugin allows you to.

<script src="vue.min.js"></script>
<script src="v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

// As a directive
Vue.directive('mask', VueMask.VueMaskDirective);
</script>

I believe it's called UMD, so is it possible to do this?

hey,

testet the demo: https://jsfiddle.net/auom8st8/
if we click in the input the cursor jumps to the last position.

is this a feature or bug?

regards

Hi,

Is there any simple approach to limit the value, for example, to accept numbers between 0-100?

Thanks.

Hi, thanks for v-money. But I've a problem. I can't change value programmatically when using as directive. I'm tried like below.

...
data() {
    return {
          price: 0.0,
    };
},
...
created() {
     axios.get('blabla').then((res) => { this.price = res.price });
},
...

I want 2 decimal places.

But when I type "1", it says "0.01"

So to input "1" I have to type 3 keys!

This is really annoying...

Except that, this is the best component ever.

How to fix this?

on script tag

import Money from 'v-money';

data()
        {
            return {
                price: 176847593210.32,
                mask: {
                    decimal: '.',
                    thousands: ',',
                    precision: 2,
                    masked: false
                }
            }
        },

components: {
            'v-money': Money
},

on Template tag
<v-money v-model="price" v-bind="mask" class="form-input input-lg"></v-money>

Error
TypeError: e.directive is not a function

v-money and Buefy UI framework have a problem with each other.

If you use Buefy input component <b-input>, you cannot set the value of v-money input. It took several hours for me to figure it out..

The following is not working;
<b-input v-model="price" v-money="money"></b-input>

The following is working;
<input class="input" v-model="price" v-money="money" />

What do you think of adding a filter to the package? If you want I can send you a suggestion.

Example: {{'1234' | money}}

Hi! I'm watching the console of my project with Vue Dev Tools on Chrome and I saw that if I open a component that has a v-text-field with v-money, it starts to trigger multiple input $emit events.
Is it the correct behavior?

Vue 2.5.13
Vuetify 1.0.18
V-Money 0.8.1

Event info:
name:"input" type:"$emit" source:"<v-text-field>" payload:Array[1] 0:"R$ 0,00"

<v-text-field label="Preço unitário" v-model.lazy="item.preco v-money ref="preco" />

Vue.use(money, { decimal: ',', thousands: '.', prefix: 'R$ ', precision: 2 });

Help!!!
Need blur event. @blur="someFunction" not working! Pls help me

The v-model returns a string with formatted value when using directives.
Is there any way to retrieve the numeric value ?

Hi,

I have the following issue:

when I try to capsulate this component in other component, something like:

<template>

    <money :id="id" :name="id" class="form-control" v-model="value" v-bind="format"></money>

</template>

<script>

    import {Money} from 'v-money';

    export default {

        props: {

            id: {
                type: String,
                default: 'control-id'
            },
            value: {
                type: Number,
                default: 0
            },

        },

        data() {
            return {
                val: 0,

                format: {
                    decimal: ',',
                    thousands: '',
                    prefix: '',
                    suffix: '',
                    precision: 0,
                    masked: false
                }

            }
        },

    }
</script>

and try to use it somewhere else like:

import Number from 'components/Number';

...
<Number id="room-count" v-model="roomCount"></Number>

It looks like it works, but of course there is a problem of modifying the props, which is:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Any idea how to pass the roomCount down to the v-money component and still get it updated back up?

Thank you!

HI i try to use this plugin with nuxt but when i say

plugins/vue-money.js

import Vue from 'vue'
// import { VMoney } from 'vue-money'
import money from 'vue-money'
console.log(money)
Vue.use(money, { precision: 4 })
// Vue.directive('money', VMoney)

nuxt.config.js

plugins: [{ src: '~/plugins/vue-money.js' }],

Directive is not defined and component are not registerd

i tried in

i dont know where the problem is on nuxt side or on this component :P
Solved i installed vue-money and not v-money

I'm assuming by the age of the open issues this repository is no longer maintained.

Is this correct?

Cheers.

Hello, you say masked: false doesn't work with directive, so it would be great to have a built in mixin to unformat a masked value, like so:

unformatMoney('R$ 1.234.593,20 #') => 1234593.2

When I use more than 100 inputs with directive, it locks the screen, gets very slow

It would be nice if component can accept :min="100" and :max="9999" props.

I'm trying to use v-money as directive and get error [Vue warn]: Failed to resolve directive: money
I use example from docs https://github.com/vuejs-tips/v-money#c-use-as-directive-httpsjsfiddlenetauom8st8

Also links to jsfiddle in component and directive examples are same.

Hi
how to capture change event inside money component?
Thanks.

errors:

[Vue warn]: Property or method "v" is not defined on the instance but referenced during render.
[Vue warn]: Property or method "money" is not defined on the instance but referenced during render.

As explained in #12 you gotta add a value.

I am trying to use directive globaly.

Vue.use(money, {precision: 4});

<input v-model.lazy="price" v-money />

And I got the error:

Error in directive money bind hook: "TypeError: Cannot convert undefined or null to object"

v-money apply style="text-align: right;"
If someone need it, it can be styled very easy. But if not, it not so easy to remove this style.

I think v-money should be about how things work, but not how things look.
So I think it should be removed.

According to README, we can pass config options like this

Vue.use(money, {precision: 4})

But actually this has no effect. I have tried passing other options as well.

import Vue from 'vue';
import money from 'v-money';

// Register global directive v-money and component <money>
Vue.use(money, {
  prefix: '$',
  suffix: '',
  thousands: ',',
  decimal: '.',
  precision: 0
});

<money v-model="price">

But no luck, i need to pass options to each component like this-

<money v-model="price" v-bind="{precision:0}">

Vue v2.4.2
v-money v0.8.0

Let me know if i am missing something.

Can you please add license file to repo.

https://help.github.com/articles/adding-a-license-to-a-repository/
https://choosealicense.com/

I need to capture the keypress event in the input, I'm using it in component mode and it does not work.
Explicitly my code is as follows:

<money v-model="qty" class="form-control" v-bind="money" v-on:keyup.enter="method"></money>

Thanks.

Is there any way to override the empty model of being assigned a default value of 0? I'd like to just have a blank text box

See the example here, for example: https://jsfiddle.net/auom8st8/25/

Masked is false, but the amount appears with mask

Hi,

i'm trying to apply a v-money mask to a couple of labels, is there a way to accomplish this?

regards.

While i use this the value does not get updated on input box.

<money v-model="data.item.cost" v-bind="money" :value="10 * 2" size="sm" class="form-control"></money>

Is there any way to make this work?

Hi,

how can I make the input trigger a change event? I want to make something like this:

<money id="val" name="val" class="form-control" v-model="val" v-bind="settings" @change="setSomethingElse"></money>


--The javascript looks like this:

val: 0,
settings: {
            decimal: ',',
            thousands: '',
            prefix: '',
            suffix: '',
            precision: 0,
            masked: false
},

....
setSomethingElse(){
// Do something here
},

This did not work, which I suppose is not supported right now...

Thank you!

When using with Vuetify, I can't reset the model value

https://codepen.io/talski/pen/MOxZXX?editors=1010

Hello everybody,

I got a problem on using your component.

First of all: I'm not a Vue.js specialist. I am developing small MIT-licensed extensions for Pagekit CMS (https://pagekit.com) and I would like to use v-money on my next.

Pagekit uses Vue 1.x .

So this is what I did so far:

item-edit.js

window.item = {

	el: '#item',

	data: function () {
		return {
			data: window.$data,
			item: window.$data.item,
			sections: [],
			price: 123.45,
			money: {
				decimal: ',',
				thousands: '.',
				prefix: 'R$ ',
				suffix: ' #',
				precision: 2,
				masked: false
			}
		}
	},

	created: function () {

		var sections = [];

		_.forIn (this.$options.components, function (component, name) {

			var options = component.options || {};

			if (options.section) {
				sections.push (_.extend ({name: name, priority: 0}, options.section));
			}

		});

		this.$set ('sections', _.sortBy (sections, 'priority'));

		this.resource = this.$resource ('api/items/item{/id}');
	},

	ready: function () {
		this.tab = UIkit.tab (this.$els.tab, {connect: this.$els.content});
	},

	methods: {

		save: function () {
			var data = {item: this.item, id: this.item.id};

			this.$broadcast ('save', data);

			this.resource.save ({id: this.item.id}, data).then (function (res) {

				var data = res.data;

				if (!this.item.id) {
					window.history.replaceState ({}, '', this.$url.route ('admin/items/item/edit', {id: data.item.id}))
				}

				this.$set ('item', data.item);

				this.$notify ('item saved.');

			}, function (res) {
				this.$notify (res.data, 'danger');
			});
		}

	},

	components: {
		settings: require ('../../components/item-edit.vue')
	}
};

Vue.ready (window.item);

As you can see here, I'm including a component. This component contains the input fields and so on.

item-edit.vue:

<template>
    <div class="uk-grid pk-grid-large pk-width-sidebar-large uk-form-stacked" data-uk-grid-margin>
        <div class="pk-width-content">
            <div class="uk-form-row">
                <input class="uk-width-1-1 uk-form-large" type="text" name="title" :placeholder="'Enter Title' | trans"
                       v-model="item.title" v-validate:required>
                <p class="uk-form-help-block uk-text-danger"
                   v-show="form.title.invalid">{{ 'Title cannot be blank.' | trans }}</p>
            </div>
        </div>
        <div class="pk-width-sidebar">
            <div class="uk-panel">
                <div class="uk-form-row">
                    <label for="form-slug" class="uk-form-label">{{ 'Slug' | trans }}</label>
                    <div class="uk-form-controls">
                        <input id="form-slug" class="uk-width-1-1" type="text" v-model="item.slug">
                    </div>
                </div>
                <div class="uk-form-row">
                    <label for="form-status" class="uk-form-label">{{ 'Status' | trans }}</label>
                    <div class="uk-form-controls">
                        <select id="form-status" class="uk-width-1-1" v-model="item.status">
                            <option v-for="(id, status) in data.statuses" :value="id">{{status}}</option>
                        </select>
                    </div>
                </div>
                <div>
                    <money v-model="price" v-bind="money"></money>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {Money} from 'v-money'

module.exports = {

	props: ['item', 'data', 'form'],

	section: {
		label: 'Item'
	},

    components: {
		money: {Money}
    }
};
</script>

Unfortunately this does not work. I'm receiving this error:

[Vue warn]: Attributes "v-model", "v-bind" are ignored on component <money> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance
warn — vue.js:1141
compileRoot — vue.js:7215
_compile — vue.js:8752
$mount — vue.js:9607
_init — vue.js:2587
VueComponent — Anonymes Skript 1 (Zeile 2)
build — vue.js:5967
mountComponent — vue.js:5884
(anonyme Funktion) — vue.js:5846
(anonyme Funktion) — vue.js:5864
_resolveComponent — vue.js:9030
resolveComponent — vue.js:5866
setComponent — vue.js:5845
bind — vue.js:5805
_bind — vue.js:8486
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
_compile — vue.js:8772
$mount — vue.js:9607
_init — vue.js:2587
VueComponent — Anonymes Skript 2 (Zeile 2)
build — vue.js:5967
mountComponent — vue.js:5884
(anonyme Funktion) — vue.js:5846
(anonyme Funktion) — vue.js:5864
_resolveComponent — vue.js:9030
resolveComponent — vue.js:5866
setComponent — vue.js:5845
update — vue.js:5819
_bind — vue.js:8521
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
Fragment — vue.js:3876
create — vue.js:4093
create — vue.js:4333
diff — vue.js:4232
update — vue.js:4165
_bind — vue.js:8521
linkAndCapture — vue.js:7055
compositeLinkFn — vue.js:7031
_compile — vue.js:8772:90
$mount — vue.js:9607
_init — vue.js:2587
Vue — vue.js:9671
e — vue.js:1:1334
r — vue.js:1:1445
warn — vue.js:1141

I'd be very happy if somebody could help me out :)

If I start the component with an integer value, for example 50, it should interpret it as number 50.00, but with the mask the input number stays as 0.50

You can reproduce the problem by paste the number 50
https://vuejs-tips.github.io/v-money/

*sorry my english