Comments (2)
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.
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.
Related Issues (20)
- Cannot read properties of undefined (reading 'conformToMask') HOT 1
- autoEmit = false --> field values not updating state when valueRange option changes HOT 4
- Input not getting updated when used with v-model and pinia store HOT 1
- IOS keyboard no minus option HOT 3
- copy paste value with dot don't insert HOT 1
- vue-currency-input shows 0 value in the first row on project edit page in my Vue 3 TypeScript project HOT 1
- Starting zeros are removed to fast HOT 1
- Quasar with vue-currency-input HOT 1
- Incompatible with Nuxt 2 / Vue 2.7.14 HOT 1
- CAD is a valid A ISO 4217 currency code but it doesnt work HOT 3
- Different Results with Locale on Different Browsers HOT 1
- Unexpected autoDecimalDigits behavior in component Playground HOT 1
- Allow custom lookup strategy for input element
- wrong result (using decimal > 10) HOT 1
- Component emitted event "change" but it is neither declared in the emits option nor as an "onChange" prop. HOT 4
- Inconsistent behaviour with Firefox + Vuetify 2 HOT 2
- No emits on vue 2.7.10 & nuxt HOT 5
- Adding options watcher in Quasar example causes input to malfunction HOT 2
- When setting currency input options, getting an error saying argument type is not assignable to CurrencyInputOptions HOT 1
- Problem with attribute currencyDisplay when use Typescript HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-currency-input.