how i could use masked="false" in <input v-mask="['##.##]" type="text" >

[a21ns1g4ts]

I need render v-mask in <input v-mask="['##.##]" type="text" > but i don't wanna emit the string mask to my endpoint. How i do this ?

[diafrit]

According to the docs:

The value returned from directive is always masked!

The masked attribute should be used in Local Component mode, as follows:

// Local Component
import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

And:

<the-mask mask="##.##" type="text" masked="false"></the-mask>

[a21ns1g4ts]

I want use <input> tag to render mask but not is possible. Only <v-mask> switch value of input to unmask

[WDMediaCo]

What is needed to use the Local Component properly inline on an HTML file? I just want to include this inside of script tags, associate it to a Vue instance through a component directly

The following gives errors with and without the brackets on TheMask

import {TheMask} from 'vue-the-mask'
new Vue({
    el: '.travelerApp',
    components : {
        {TheMask}
    }
});

I can use as a plugin, but the masked option seems to stay true - same as directive. I tried passing the option to plugin without success. import VueTheMask from 'vue-the-mask' Vue.use(VueTheMask, { masked : false })

Please help thank you

[WDMediaCo]

Managed to get this together based on vue-the-mask/src/docs/field.vue:

inputmask.vue

<template>
    <inputmask :mask="mask" :tokens="tokens" v-model="editableValue" :placeholder="placeholder" :masked="masked" :type="type || 'tel'" @click.native="clickTest(editableValue)"  />
</template>

<script>
    import {TheMask} from 'vue-the-mask'
    export default {
        components: { 'inputmask': TheMask },
        props: ['label', 'mask', 'placeholder', 'masked', 'type', 'tokens', 'value'],
        data () {
            return {
                editableValue: this.value
            }
        },
        methods: {
            clickTest: function(val){
                alert(val)
            }
        }
    }
</script>

app.js

import Vue from 'vue'
import inputmask from './components/InputMask.vue'
new  Vue({
    el: 'inputmask',
    components: { inputmask }
})

Any advice on improving this method of deployment would be appreciated

[WDMediaCo]

Also, implemented in html doc

<inputmask name="phone_main" mask="(###) ###-####" placeholder="Primary Phone" value="" />

[lookingcloudy]

Ugh - would be so easy to allow the masked in put in the directive. Using the component version = no good when using 3rd party input components. Looks like we have to fork this.

[gomes-fdr]

Hi folks, +1 - I realy need this - I am using buefy(vuejs+bulma) end it has a tag called b-autocomplete - and I need that field return a no-mask value. Please guys, does it hard to do?

[decarvalhorobinson]

Ugh - would be so easy to allow the masked in put in the directive. Using the component version = no good when using 3rd party input components. Looks like we have to fork this.

I want to use it with md-input with no success unless I remove all simbols before sending to my rest endpoint.

[fontenele]

Working with vuetify I can not use v-text-field with v-mask returning raw data, i have tried all sugestions without success. This always returns masked value :(

[fontenele]

Working with vuetify I can not use v-text-field with v-mask returning raw data, i have tried all sugestions without success. This always returns masked value :(

I resolved my case using native vuetify mask

:mask="user.language === 'ptBR' ? '(##) ####-####' : '(###) ###-####'"

So for more complex situations i can use :mask to receive a computed, prop or data value

[Sehur]

Working with vuetify I can not use v-text-field with v-mask returning raw data, i have tried all sugestions without success. This always returns masked value :(

I resolved my case using native vuetify mask

:mask="user.language === 'ptBR' ? '(##) ####-####' : '(###) ###-####'"

So for more complex situations i can use :mask to receive a computed, prop or data value

Sadly, in vuetify 2.0.0 :mask is no longer supported, so we really need to be able to get the raw values using the directive.

[neanderthil]

I am in this same boat with Vuetify. I am a bit perplexed as to why they removed the default mask, and also perplexed as to why we cannot emit the value with this library. Does anyone have another option?

[renerdias]

+1

[aldarund]

@neanderthil vuetify removed default mask because it was buggy and they guy who wrote it dont maintain it and they dont have resources to maintain it.

[aldarund]

you can use something like this as workaround https://github.com/vuetifyjs/vuetify/issues/8192#issuecomment-516793487

[titou10titou10]

+1

[matheusaguilar]

// i'm using at the moment:

function unmask(maskedValue, mask){

        let defaultTokens = ['#', 'X', 'S', 'A', 'a', '!'];
        let unmaskedValue = '';
        let isToken;

        for(let i=0; i<maskedValue.length; i++){
            isToken = false;
            for(let j=0; j<defaultTokens.length; j++){
                if (mask[i] == defaultTokens[j]){
                    isToken = true;
                }
            }

            if (isToken){
                unmaskedValue += maskedValue[i];
            }
        }

        return unmaskedValue;
}

unmask('20/08/2019', '##/##/####');

[titou10titou10]

The original"unmask"function from vuetify v1.5.x works pretty well too: https://github.com/vuetifyjs/vuetify/blob/v1.5.18/packages/vuetify/src/util/mask.ts It is used by the"VtextField" component in v1.5.x

export const defaultDelimiters = /[-!$%^&*()_+|~=`{}[\]:";'<>?,./\\ ]/
export const unmaskText = (text: string): string => {
      return text ? String(text).replace(new RegExp(defaultDelimiters, 'g'), '') : text
}

[titou10titou10]

I just published a npm package with a "mask" directive that exposes the masked text inv-modelas usual and the unmasked text in a separate variable, plus a few extra features.

Check https://www.npmjs.com/package/@titou10/v-mask

This is my first npm publish and this is the first version so be indulgent...

[xeroxstar]

I just published a npm package with a "mask" directive that exposes the masked text inv-modelas usual and the unmasked text in a separate variable, plus a few extra features.

Check https://www.npmjs.com/package/@titou10/v-mask

This is my first npm publish and this is the first version so be indulgent...

thanks, worked like a charm!!!

[ebertti]

Suggestion:

Create a directive v-unmask to return unmasked data like the-mask component with masked="false"

[artursudnik]

+1

[kayosouza]

+1

[wallcrosstype]

// i'm using at the moment:

function unmask(maskedValue, mask){

        let defaultTokens = ['#', 'X', 'S', 'A', 'a', '!'];
        let unmaskedValue = '';
        let isToken;

        for(let i=0; i<maskedValue.length; i++){
            isToken = false;
            for(let j=0; j<defaultTokens.length; j++){
                if (mask[i] == defaultTokens[j]){
                    isToken = true;
                }
            }

            if (isToken){
                unmaskedValue += maskedValue[i];
            }
        }

        return unmaskedValue;
}

unmask('20/08/2019', '##/##/####');

combine @aldarund link and @matheusaguilar function

import masker from 'vue-the-mask/src/masker' // bad practice ? but vue-the-mask doesn't export masker anymore
import { tokens } from 'vue-the-mask'

function unmask (maskedValue, mask) {
  return masker(maskedValue, mask, false, tokens)
}

unmask('20/08/2019', '##/##/####')

[henriqueArrazao]

The plugin sets the 'oninput' of the element, so just remove it

import { mask } from "vue-the-mask";
export default {
  directives: {
    mask(el, binding) {
      binding.value ? mask(el, binding) : (el.oninput = null)
    }
  }
}

[willian-moura]

Using plugin, this works for me:

import { mask } from 'vue-the-mask'

Vue.directive('mask', function (el, binding) {
  if (!binding.value) {
    return
  }
  mask(el, binding)
})

[JeffJassky]

The solutions here don't allow for the dynamic masks. If I have a mask set, then set it to undefined, it stays masked.