Solution

Reactive states

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.

Adding tasks

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.

Deleting tasks

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.

Notes

Using Vue, the template will automatically escape the content you try to render. So you don't need to worry about XSS yourself!

Test Cases

• Add tasks
  • Add a new task.
  • Add multiple tasks.
  • Add tasks with potentially malicious content like HTML (e.g. <script>, <style> or <link>) and ensure there's no XSS.
  • Check that <input> is cleared after a task is added.
• Delete tasks
  • Delete an existing task.
  • Delete multiple tasks.
  • Delete newly-added tasks.