Format a Canadian Phone Number on Input With Vuejs

I finally found something that works!!! well the code might not be perfect, but this will do for the moment. Check it out below

// Create a method
formatPhoneNumber() {
  const x = this.phone
    .replace(/[^0-9+]/g, '')
    .match(/(\+1)(\d{0,3})(\d{0,3})(\d{0,4})/)

  if (x) {
    if (!x[2]) {
      this.phone = `${x[1]}`
    } else if (!x[3]) {
      this.phone = `${x[1]} ${x[2]}`
    } else if (!x[4]) {
      this.phone = `${x[1]} ${x[2]}-${x[3]}`
    } else {
      this.phone = `${x[1]} ${x[2]}-${x[3]}-${x[4]}`
    }
  }
},

// Listen to the input event on your form input
<input @input="formatPhoneNumber()" v-model="phone" />

Please, if you have a better suggestion, kindly post it on the comment section, so everyone can learn from it. Thanks.

Don’t forget to share!