Premium

Transfer List (Move Selected Items Between Two Lists)

By FrontendAtlas Team · Updated Jan 30, 2026

This UI should keep item order stable, clear selection after transfer, and avoid no-op actions when nothing is selected. Concepts: vue, components, reactivity, derived state, event handlers, lists, inputs. Vue focus: manage selection with reactive arrays and computed helpers. Framework focus: Vue SFC patterns, ref/reactive…

Render two lists: Top and Bottom.
Each row must have a checkbox to select the item.

What you’ll build / What this tests

This premium vue coding focuses on Transfer List (Move Selected Items Between Two Lists). You’ll apply vue and components thinking with medium level constraints. The prompt emphasizes This UI should keep item order stable, clear selection after transfer, and avoid no-op actions when….

Learning goals

Translate the prompt into a clear vue API signature and return shape.
Apply vue, components, reactivity techniques to implement transfer list (move selected items between two lists).
Handle medium edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in vue.

Key decisions to discuss

Define the exact input/output contract before coding.
Choose iteration vs higher-order methods for readability.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render two lists: Top and Bottom.
Each row must have a checkbox to select the item.
Provide two buttons between the lists: ↓ moves selected Top items to Bottom, ↑ moves selected Bottom items…
When moving items, append them to the end of the destination list.
After moving, clear the selection of the moved-from list.
Top and Bottom lists render initial items.
Selecting checkboxes enables the corresponding move button (↓ for Top, ↑ for Bottom).
Clicking ↓ moves selected items from Top to Bottom and clears Top selection.
Clicking ↑ moves selected items from Bottom to Top and clears Bottom selection.
Selections are per-list (selecting in Top should not affect Bottom).

Mini snippet (usage only)

// Example usage
const input = /* transfer list (move selected items between two lists) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.