Refresh Mask Directive

[kevinfaveri]

Is there any way I can refresh the directive to reapply the mask?

[geidsonc]

Did you find solution to this?

[kevinfaveri]

Did you find solution to this?

I think mimicking a input programatically might refresh the mask, like this:

const domInputElement = document.getElementById("elementId");
domInputElement.value = newValue; // if you want to set some value programatically
domInputElement.dispatchEvent(new Event('input')); // mimick a input event, which might refresh the mask

Note, though, that i've not tested this on this library... at the time I created this issue I used the mask lib "v-mask".

[tkilgour]

Just to follow up to this question – I am using v-mask on a custom input component and was able to get this to work using Vue's $emit function.

I added a ref to the component.

<custom-phone-input v-mask="'(###) ###-####'" ref="phone"  />

Then in my method I refreshed the masking like this:

// wrapped in nextTick callback so it is called after the DOM has updated
this.$nextTick(() => {
    this.$refs.phone.$emit('input')
})

[Victor7095]

@tkilgour I tried your method but It'didn't worked. I'm using buefy and vee-validate. Try on codesandbox is my custom input made with buefy (before adding nextTick to innerValue watch which gives the same result:

<template>
  <ValidationProvider
    :vid="vid"
    :name="$attrs.name || $attrs.label"
    :rules="rules"
    v-slot="{ errors, valid }"
  >
    <b-field
      v-bind="$attrs"
      :label-for="$attrs.name"
      :type="{ 'is-danger': errors[0], 'is-success': valid }"
      :message="errors[0] || $attrs.message"
      v-mask="mask"
    >
      <b-input
        :id="$attrs.name"
        v-model="innerValue"
        v-bind="$attrs"
        ref="input"
      ></b-input>
    </b-field>
  </ValidationProvider>
</template>

<script>
import { ValidationProvider } from "vee-validate";
import { mask } from "vue-the-mask";

export default {
  directives: {
    mask: {
      bind(el, binding) {
        if (binding.value && binding.value !== "") {
          mask(el, binding);
        }
      },
      unbind() {}
    }
  },
  components: {
    ValidationProvider
  },
  props: {
    vid: {
      type: String
    },
    rules: {
      type: [Object, String],
      default: ""
    },
    mask: {
      type: String,
      default: ""
    },
    // must be included in props
    value: {
      type: null
    }
  },
  data: () => ({
    innerValue: ""
  }),
  watch: {
    // Handles internal model changes.
    innerValue(newVal) {
      this.$emit("input", newVal);
    },
    // Handles external model changes.
    value(newVal) {
      this.innerValue = newVal;
    }
  },
  created() {
    if (this.value) {
      this.innerValue = this.value;
    }
  }
};
</script>