How to add phone mask in the input ?

[Evandro P.]

Is there some way to create mask in the input like a phone mask for example ?

[Evandro P.]

I have been using vue-mask (https://github.com/probil/v-mask) in other projects without quasar-framework and it works great but it caused a “conflict” when I tried to add vue-mask in a quasar-framework project. Has anyone had the same problem?

[Dobromir]

What is the conflict? Any errors?

[rstoenescu]

@Evandro-P hi, can you pls open up a github request ticket? Thinking of adding this to v0.14.

[leon]

@rstoenescu add mask to quasar ? AMAZING
Almost 90% of admin systems have a form and mask is always user friendly.

[rstoenescu]

A [Request] Input boxes with mask ticket will do. So I won’t forget. Working on a lot of stuff

[Evandro P.]

@Dobromir No errors was shown. I could use. I created a new quasar project and added the v-mask. It worked perfect. But, I still do not know whats is wrong in first example.

[Evandro P.]

@rstoenescu Ok. I will.

[2bj]

import VMasker from 'vanilla-masker'

export default {
  data () {
    return {
      form: {
        name: '',
        phone: ''
      }
    }
  },
  watch: {
    'form.phone' (newVal, oldVal) {
      this.form.phone = VMasker.toPattern(newVal, '+9 (999) 999-99-99')
    }
  }
}