Vue 3 Reactive Collections: Managing Dynamic Lists

This challenge focuses on implementing and utilizing Vue 3's reactivity system to manage a dynamic list of items. You will build a component that allows users to add, remove, and mark items as complete within a to-do list, demonstrating how Vue's ref and reactive can efficiently handle collection updates.

Problem Description

Your task is to create a Vue 3 component that manages a to-do list. The list of to-do items should be reactive, meaning that any changes to the list (adding, removing, or updating item status) should automatically trigger updates in the user interface without manual DOM manipulation.

Key Requirements:

1. Data Structure: The to-do items should be stored in a reactive collection. You can choose to use ref with an array or reactive with an object containing an array.
2. Adding Items: Implement a mechanism to add new to-do items to the list. Each item should have at least a text property and a completed boolean property.
3. Displaying Items: Render the list of to-do items in the UI. Each item should display its text.
4. Toggling Completion: Provide a way for users to toggle the completed status of an individual to-do item. Visually indicate whether an item is completed (e.g., by striking through the text).
5. Removing Items: Implement functionality to remove individual to-do items from the list.
6. Reactivity: All changes to the to-do list (adding, toggling, removing) must be handled reactively by Vue 3.

Expected Behavior:

• When a new item is added, it should appear in the list immediately.
• When an item's completion status is toggled, its visual representation (e.g., strikethrough) should update accordingly.
• When an item is removed, it should disappear from the list.

Edge Cases to Consider:

• Adding an empty to-do item (consider how to handle this, e.g., by preventing it or displaying an empty string).
• Removing an item that has already been removed (should not cause errors).

Examples

Example 1: Initial State and Adding Items

Input (Conceptual - initial data in the Vue component): An empty to-do list. A form to input new to-do text.

User Action:

1. User types "Buy groceries" into an input field.
2. User clicks an "Add" button.
3. User types "Walk the dog" into the input field.
4. User clicks the "Add" button.

Output (UI Rendering):

<ul>
  <li>Buy groceries</li>
  <li>Walk the dog</li>
</ul>

Explanation: The ref or reactive collection is updated with the new items. Vue automatically re-renders the <ul> to include the new <li> elements.

Example 2: Toggling Completion and Removing Items

Input (Conceptual - current state): A reactive list containing: [{ id: 1, text: 'Buy groceries', completed: false }, { id: 2, text: 'Walk the dog', completed: false }]

User Action:

1. User clicks a checkbox next to "Buy groceries".
2. User clicks a "Remove" button next to "Walk the dog".

Output (UI Rendering):

<ul>
  <li style="text-decoration: line-through;">Buy groceries</li>
</ul>

Explanation:

• Toggling "Buy groceries" updates its completed property to true. Vue applies a line-through style to the corresponding <li>.
• Removing "Walk the dog" results in its removal from the reactive collection. Vue re-renders the <ul> without the item.

Example 3: Handling Empty Input

Input (Conceptual - initial data): A reactive list: [{ id: 1, text: 'Clean room', completed: false }]. An input field.

User Action:

1. User leaves the input field empty.
2. User clicks the "Add" button.

Output (UI Rendering):

<ul>
  <li>Clean room</li>
</ul>

(The empty item is not added to the list).

Explanation: The component's logic prevents adding empty strings to the reactive collection, thus no new <li> is rendered.

Constraints

• Vue.js version: 3.x (Composition API recommended)
• Language: TypeScript
• Reactivity: Must use Vue 3's reactivity primitives (ref or reactive).
• Performance: The solution should be efficient for a moderate number of to-do items (up to 100).
• No external state management libraries (e.g., Pinia, Vuex) should be used for this specific challenge.

Notes

• Consider assigning a unique id to each to-do item to facilitate easier management and removal.
• Think about how to structure your reactive data. Using ref with an array of objects is a common and straightforward approach.
• The UI for adding, toggling, and removing can be basic HTML elements (input, button, checkbox, list items).
• Focus on the reactive updates to the collection and how they reflect in the DOM.
• The id for new items can be a simple counter or a generated unique ID.