To start our component, we can create our Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Adding an event listener to an element' recipe.
In the following steps, we will remove the v-model directive sugar syntax from the input:
- Open the TaskInput.vue file.
- At the <template> block of the component, find the v-model directive. We'll remove the v-model directive. Then, we need to add a new bind to the input called v-bind:value or the shortened version, :value, and an event listener to the HTML input element. We need to add an event listener to the input event with the v-on:input directive or the shortened version, @input. The input bind will receive the task value as a parameter and the event listener will receive a value attribution, where it will make the task variable equal the value of the event value: