Is it possible to control v-mask in Vue?

Question

Is it possible to control v-mask in Vue?

One challenge I am facing is with an input tag that utilizes v-mask for formatting a mobile number:

<input type="text" placeholder="Phone Number" id="phoneNumber" class="form-control"  
 v-model="numberAndCaptcha.phoneNumber" @keyup="onNumberChange" v-mask="mask"/>

mask:['###-###-####'] //defined as a data attribute

While this setup works well and the number gets formatted correctly as intended,

I have encountered an issue when trying to pre-populate the input with a number obtained from the backend upon reload.

The requirement is to mask the first six digits of the populated number, resulting in an input value like "******7890"

Unfortunately, due to restrictions within v-mask, the final input value only displays the last 4 digits of the pre-populated number since v-mask does not accept anything other than digits.

Is there a solution available to achieve the desired result on reload? Specifically, having a masked number that also complies with v-mask requirements?

javascript vue.js vue-component

Answer 1

Answer №1

The mask library utilizes various patterns, such as the # symbol that specifically accepts numerical values.

For more information, refer to: (from: https://github.com/vuejs-tips/vue-the-mask/blob/master/src/tokens.js)

export default {
  '#': { pattern: /\d/ },
  X: { pattern: /[0-9a-zA-Z]/ },
  S: { pattern: /[a-zA-Z]/ },
  A: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
  a: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
  '!': { escape: true }
}

This code snippet showcases the different patterns available. Here's a breakdown:

#: Accepts numbers only
X: Accepts numbers and upper/lowercase letters
S: Accepts letters as they are entered
A: Accepts letters and converts them to uppercase
a: Accepts letters and converts them to lowercase

Answer 2

The mask library utilizes various patterns, such as the # symbol that specifically accepts numerical values.

For more information, refer to: (from: https://github.com/vuejs-tips/vue-the-mask/blob/master/src/tokens.js)

export default {
  '#': { pattern: /\d/ },
  X: { pattern: /[0-9a-zA-Z]/ },
  S: { pattern: /[a-zA-Z]/ },
  A: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
  a: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
  '!': { escape: true }
}

This code snippet showcases the different patterns available. Here's a breakdown:

#: Accepts numbers only
X: Accepts numbers and upper/lowercase letters
S: Accepts letters as they are entered
A: Accepts letters and converts them to uppercase
a: Accepts letters and converts them to lowercase

Is it possible to control v-mask in Vue?

Answer №1

Similar questions

How does SWR affect React state changes and component re-rendering?

Display Vue components in VuePress

POST request using Axios fails to authenticate with JWT token, yet the GET request is successfully authenticated

What steps can be taken to prevent the controller action if the password and confirm password do not match?

Customize your DataGrid filtering with Material UI custom list filter feature

The object's value might be undefined, despite having null checks in place

Issue encountered in Angularjs during upgrade process from version 1.2.27 to 1.4.7

Ways to expose an object in a Node module

Creating an asynchronous function in a Vue.js component that utilizes the Lodash library

The duration for which an API Access Token remains valid is extremely brief

Yet another error encountered: "Headers cannot be set after they have already been sent to the client" when submitting the form

Issue with Angular ngModel not syncing with variable changes

The useRouter() function doesn't seem to be successfully navigating to the main landing page

Retrieve the highest value indexes from a three-dimensional array with JavaScript

Navigate to the middle of a DIV container in Angular 7

Inserting Random Data into MySQL Tables using Node.js

Executing a function in cesium.js upon the occurrence of an event

Optimizing my AngularJS bundle is pushing me towards upgrading to Angular 5

Using jQuery to make multiple requests with AJAX

The code begins executing even before the function has finished its execution