Session 8: Vue.Js - I
You have already created a "to-do list" relying on HTML, CSS, and JavaScript. Today, we will be creating a "to-do list" using Vue.Js.
Our "to-do list" (shown in the figure below) is composed of a form that contains:
- An "input text box" that can be used to enter a description of a task we want to add to our list.
- An "Add Task" button that "when pressed" will take the text written in the "input text box" and make it appears as a new task in our list after the last task. Note1: Pressing the "Add Task" button should empty the "input text box". Note2: The "Add Task" button should be disabled (you cannot press it), if the "input text box" is empty, i.e., you did not write anything in the "input text box".
- A "Delete all" button that "when pressed" all listed tasks should be deleted. Note1: The “Delete all” button should not be “shown” (rendered to the page) unless there is more than one task.
Each task in the “to-do list”:
- Should appear on a separate line,
- Should be accompanied by a “delete” button that when pressed, the task should be deleted.
- Should change its text decoration style to line-through and its text color to blue, when pressed on.
Based on your knowledge of HTML, CSS, JavaScript, and Vue.Js, how can we implement the previously described "to-do" list?
Take a moment to think about the following:
- Where do we "put/save" our tasks, the tasks we are adding?
- How many methods do we need?
- How can we implement each of these methods?
- How we can capture the text/value of the input text box and how we can add it to our list of tasks?
- How can we empty the content of the “input text box” when we press the "Add Task" button?
- How can we output (render) the tasks list to the page?
- How can we make the "Delete all" button appear/disappear depending on the number of added tasks?
- How can we change the text decoration style and color of the tasks, when we press on them?
An annotated solution exists in the following repository: Repo.