Ability to change mask dynamically about v-mask

[probil]

hmm... I will check. You are using v1.x (for vue-2.x), right?

[lucassmacedo]

i`m using 2.x.. i want change by conditional..

<input type="radio" id="cpf" value="cpf" name="type"  v-on:change="onChange">
<input type="radio" id="cnpj" value="cnpj" name="type" v-on:change="onChange">

..
<input v-mask="maskDoc" type="text" name="doc" > ...

        data: function () {
            return {
                maskDoc = '###.###.###/###';
            }
        },

...

            onChange : function(e){
              var radio = e.srcElement;
              var value = radio.value;
                if(value  == 'cpf'){
                    this.maskDoc = '###.###.###/###';
                }else{
                    this.maskDoc = '###.###.#####/###-##';
                }
            }

....

[caioincau]

I am having the same problem on my job.

[caioincau]

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (Vue) {
  Vue.directive('mask', {
    bind: function bind(el, _ref2) {
      var value = _ref2.value;

      var handlerFunc = handler.bind({ format: value });
      el.addEventListener('input', handlerFunc, false);

      return handlerFunc({ target: el });
    },
    componentUpdated(el, {value,oldValue}){

      if(value !== oldValue){
        var elClone = el.cloneNode(true);
        el.parentNode.replaceChild(elClone, el);
        console.log("Old" + oldValue);
        console.log("value" + value);
        let handlerFunc = handler.bind({format: value});
        elClone.addEventListener('input', handlerFunc, false);
        return handlerFunc({target: elClone});
      }
    },
    unbind: function unbind(el) {
      el.removeEventListener('input', handler, false);
    }
  });
};

var _format = require('./format.js');

var _format2 = _interopRequireDefault(_format);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function handler(_ref) {
  var target = _ref.target;
  var previousValue = target.dataset.previousValue;

  if (typeof previousValue === 'string' && previousValue.length < target.value.length) {
    target.value = (0, _format2.default)(target.value, this.format);
  }

  target.dataset.previousValue = target.value;
}

;

[caioincau]

This is working for me

[probil]

@icaio Why you are changing compiled version?
BTW, this feature will be implemeted in the next release. It's already fixed

[caioincau]

Oh thanks :D

[probil]

@icaio , @lucassmacedo
Try latest master. I have already fixed it

[caioincau]

@probil the mask is working, but when you change the mask and type, the field lost focus and lost the previous value.

[probil]

@icaio Ok, the PureMask.js (the formatting function) is not "smart" enough to be able to parse old data with new mask. So, I'm going to use another lib or write my own. There is a lot of issues with PureMask.js