We will need two reactive state: tasks and newTask.
tasks: Since there's a list of tasks that can be modified, we will need it to be part of the component's reactive state. When rendering a list of elements in Vue, we can use v-for and it's recommended to provide a key for each item whenever possible. We cannot use the text of the task as the key because they are not guaranteed to be unique. For this question, we generate a unique index for each task locally using an auto incrementing counter. The most foolproof method is to generate a unique ID for each task. Libraries like uuid come to mind.
newTask: a reactive state that binds to the new task input field. To read more, you can refer to the official document of form input bindings.
New tasks should be added to the end of the tasks array. We can construct a new task object with a new id and the label field, and push to the tasks reactive state.
Having a unique id for each task object simplifies things here because we can filter the existing list and exclude the task corresponding to the id to be removed.
Using Vue, the template will automatically escape the content you try to render. So you don't need to worry about XSS yourself!
<script>, <style> or <link>) and ensure there's no XSS.<input> is cleared after a task is added.You're given some existing HTML for a Todo List app. Add the following functionality to the app:
<input> field should be cleared upon successful addition.ids, data attributes, replacing some tags, etc), but the result should remain the same visually.We will need two reactive state: tasks and newTask.
tasks: Since there's a list of tasks that can be modified, we will need it to be part of the component's reactive state. When rendering a list of elements in Vue, we can use v-for and it's recommended to provide a key for each item whenever possible. We cannot use the text of the task as the key because they are not guaranteed to be unique. For this question, we generate a unique index for each task locally using an auto incrementing counter. The most foolproof method is to generate a unique ID for each task. Libraries like uuid come to mind.
newTask: a reactive state that binds to the new task input field. To read more, you can refer to the official document of form input bindings.
New tasks should be added to the end of the tasks array. We can construct a new task object with a new id and the label field, and push to the tasks reactive state.
Having a unique id for each task object simplifies things here because we can filter the existing list and exclude the task corresponding to the id to be removed.
Using Vue, the template will automatically escape the content you try to render. So you don't need to worry about XSS yourself!
<script>, <style> or <link>) and ensure there's no XSS.<input> is cleared after a task is added.console.log() statements will appear here.