Master Alpine.js directive vocabulary — reactive data scopes, event listeners, two-way binding, loops, and global stores.
0 / 5 completed
1 / 5
In a code review, a component uses x-data on a div. A junior developer asks what x-data does in Alpine.js. The correct answer is:
x-data="{ open: false }" defines the reactive data scope for an Alpine component. All child elements can access and modify open via other Alpine directives.
2 / 5
A teammate's dropdown doesn't close when the user presses Escape. In a code review, you suggest adding an event listener using x-on. Which is the correct Alpine.js shorthand for x-on:keydown.escape?
@keydown.escape is the Alpine.js shorthand for x-on:keydown.escape, attaching a keyboard event listener that fires when Escape is pressed.
3 / 5
During a PR review, a list is rendered with x-for="item in items". A reviewer asks why you added :key="item.id". The reason is:
The :key attribute gives Alpine a stable identity per item, enabling efficient DOM patching when items are added, removed, or reordered.
4 / 5
In a standup, a teammate wants to share state (e.g., a cart count) between two Alpine components that are not nested. You recommend using $store. What is an Alpine store?
Alpine stores (registered via Alpine.store('cart', { count: 0 })) are global reactive objects. Any component can read or mutate them via $store.cart.count.
5 / 5
A PR uses $refs to focus an input programmatically. In a review, a senior engineer asks what $refs provides in Alpine.js. The correct answer is:
$refs.myInput returns the native DOM element marked with x-ref="myInput" inside the component, enabling imperative DOM access (e.g. $refs.input.focus()).