I have two masked input fields and I need to show only one of the two. Unfortunately, when I use v-if it doesn't apply the proper mask on the second element. It applies the mask of the first element to the second element.

I knowv-show is an option but in this case, I need to use v-if so one of the input won't send data to the server.

You can check in this example https://jsfiddle.net/ankurk91/d92xgzhL/, just add the clearIfNotMatch: true, in the options, and put a wrong value on input.

I think the right thing would be when the value does not match the mask, the v-model should be blank, equal to the input value.

I looked at the source code, and realized that have to modify on the component.vue:

onBlur(event) {
    this.$emit('blur', this.value)
}

to:

onBlur(event) {
    this.$nextTick(() => {
        let toEmit = this.raw ? jQuery(this.$el).cleanVal() : event.target.value;
        this.$emit('input', toEmit);
        this.$emit('blur', this.value)
    });
}

Once the onBlur event is triggered it should update the value of the v-model because the field can clear because of the wrong value for the mask.

If possible, I'd like you to take a look, I'm needing too much of this component.

Thank you very much in advance.

Hi,

I tried binding the required attribute dynamically like so:

<vue-mask id="rental_amount"
                    name="amount"
                    mask="000,000,000.00"
                    :options="{reverse: true}"
                    type="text"
                    :required="isRequired"
                    :aria-required="isRequired"></vue-mask>

I want the required attribute to be conditional. The plugin generated a required="required" attribute even if the isRequired data is false.

Is there a way to make this conditional?

This should be fixed as soon as

https://github.com/igorescobar/jQuery-Mask-Plugin/pull/656 OR https://github.com/igorescobar/jQuery-Mask-Plugin/pull/674

gets merged

Another way is to listen to input event

<input :type="type"  @input="onInput">

 onInput(e) {
        let toEmit = this.raw ? jQuery(this.$el).cleanVal() : e.target.value;
        this.$emit('input', toEmit);
      },