Using `v-model` to Create a Custom Form Control

Custom form controls or, more precisely, custom input elements are a staple of innovative and modern web applications. There are countless possibilities for custom inputs—the only boundary is our creativity. Thanks to Vue’s implementation of two-way binding, we can turn almost any interaction into a ready-to-use form element.

Two-way binding repetition and further understanding

Let’s do a quick repetition of how Vue generates two-way binding out of v-model and how we can rebuild v-model. We can two-way bind any data or computed prop to an input field using v-model. The v-model is equivalent to using an event listener for the input event and setting the value property of the same field. In code, equivalence means the following: