What if I told you that behind the magic of v-model, there is a lot of code that makes our magic sugar syntax happen? What if I told you that the rabbit hole can go deep enough that you can control everything that can happen with the events and values of the inputs?
In this recipe, we will learn how to extract the sugar syntax of the v-model directive and transform it into the base syntax behind it.
Getting ready
The prerequisite for this recipe is Node.js 12+.
The Node.js global objects that are required for this recipe are as follows:
- @vue/cli
- @vue/cli-service-global
To start our component, we can create our Vue project with the Vue CLI, as we learned in the Creating your first project with the Vue CLI recipe, or use the project from the Adding an event listener to an element recipe.
How to do it...
By performing the following steps, we will remove the v-model directive sugar syntax from the input:
- Open the TaskInput.vue file.
- At...