Listen to Podcast Audio
Building Fast and Semantic Input Masks in VueJS
Input masking is a common pattern in form design that guide users to enter information in the correct format in a consistent manner. Typically this involves formatting user input according to the type of data they represent like dates, phone numbers, addresses and credit card numbers. You can achieve an input mask in Vue by leaning heavily Vue’s reactivity system chiefly methods, computed, and watchers. In this talk, we will cover the distinction between the various components that make up Vue’s reactivity system and how to leverage it in order to create semantic and robust input elements that respond seamlessly to user feedback.