Building Forms with Vue.js

Enhancing our custom inputs

We have put in a lot of work to create our awesome custom BaseInput, so we definitely want to keep using it!

Follow these steps in order to modify BaseInput and to allow for input masking:

1. Go back to App.vue and switch the <input> element for a <BaseInput> component:

<BaseInput label="Telephone" type="text" v-model="form.telephone"/>

Let's go into BaseInput.vue now and create a new prop; we will call it mask, and it will default to an empty string. It is important that we default it to an empty string, or else the directive will try to match it, and we won't be able to type into the fields if they don't have a declared mask!

2. Add it to your props object:

...,mask: {type: String,required: false}

3. Now, go back ...