Comments (4)
Took the liberty of forking and suggesting a fix (crude, most likely, but it's a start):
#20
Let me know what you think.
Cheers.
from vue-currency-input.
Alternatively, without you changing anything in your code:
<template>
<el-input v-model="internalValue" v-currency="options" class="currency-input"/>
</template>
<script>
export default {
props: ['value', 'currency'],
components: {},
data: function () {
return {
options: {
locale: 'el',
currency: this.currency,
distractionFree: true,
validateOnInput: false
},
internalValue: null
}
},
watch: {
value(newValue, oldValue) {
// only format when value is set programmatically, not typed in by user
if (oldValue == null && newValue != null && this.internalValue == null) {
this.internalValue = this.formatCurrency(newValue, this.currency, this.options.locale)
} else {
this.internalValue = newValue
}
},
internalValue(newValue) {
this.$emit('input', this.$parseCurrency(newValue, this.options.locale, this.options.currency))
}
},
methods: {
formatCurrency(num, currency, locale) {
if (typeof num === 'string') {
return num
} else if (num && typeof num === 'number') {
return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(num)
}
return null
}
}
}
</script>
from vue-currency-input.
Hi, there's no need to expose a format method or to re-implement it on your own.
Check out this example: https://codesandbox.io/s/element-ui-currency-input-z8gik
from vue-currency-input.
Ah, perfect, hadn't noticed that format
event!
Closing the issue.
Thanks a lot!
from vue-currency-input.
Related Issues (20)
- 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
- TypeError: undefined is not an object (evaluating 'this.numberMask.conformToMask') in IOS 12 HOT 1
- Input breaks when using watch options and autoDecimalDigits false HOT 3
- Prevent onChange event when mounted? HOT 1
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.