There are some basic principles involved in making a to-do application—it must have a list of tasks; those tasks can be marked as done and undone, and the list can be filtered and sorted. Now, we are going to learn how to take the tasks and add them to the task list.
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 'Removing the v-model from the input' recipe.
Now, follow these steps to create a dynamic to-do list with Vue and the previous recipes:
- In the App.vue file, we will create our array of tasks. This task will be filled every time the TaskInput.vue component emits a message. We will add an object to this array with the task, and the current date when the task was created. The date when the task was finished will be undefined for now. To do this, in the <script...