[request] QInput Currency or custom mask using Vue filter

See original GitHub issue

I have search other issues and also checked the documentation and also asked in the discord, but I did not find a solution on how to setup QInput to have a currency mask. The currency mask should have the options to set the decimal point character (default: ‘.’) and the thousands-separator character (default ,).

I am not sure how can I achieve this, maybe like this e.g.:

<q-input 
  mask="currency"
  decimal-point="." // default is "."
  thousands-separator="," // default is ","
/>

or maybe pass a callback formatter or a registered Vue.filter like this?:

Vue.filter('currency', (value, options) => {})
<q-input
  mask="currency"
/>

Related: #462 #2101

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:7
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
rstoenescucommented, Nov 18, 2019

QInput usage with 3rd party on docs added. Will be visible on next deployment.

3reactions
pdanpdancommented, Nov 15, 2019

Ok, I think I was quicker: https://codepen.io/pdanpdan/pen/KKKrwbe?editors=1011

Watch out if using v-money directive because it doesn’t support masked values (so a numeric value of 12.30 width a mask of 2 decimals will show 1.23 - but take it to v-mask people)

I’ll add an example to documentation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[request] QInput Currency or custom mask using Vue filter
[request] QInput Currency or custom mask using Vue filter. ... but I did not find a solution on how to setup QInput to...
Read more >
How to transform input values using v-mask when building ...
Let's go into BaseInput. vue now, and create a new prop; we will call it mask , and it will default to an...
Read more >
Vue 3 - currency input filter [closed] - Stack Overflow
Does anyone know a library that converts number input to currency format and can be applied to Vue 3, because most use filters...
Read more >
The Mask for Vue.js - vuejs-tips
The value returned from directive is always masked! When possible, prefer to use input type="tel" to avoid glitch on android devices. What about...
Read more >
Input | Quasar Framework
The QInput Vue component is used to capture text input from the user. ... Custom mask or one of the predefined mask names....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found