Alpine.js University Campus

Demonstrating $el, $refs, and $root

You are viewing the Entire Campus ($root element)

$el

The Current Building

Manipulating the element you interact with.

$el refers to the DOM element that the directive is on. Here, clicking a building highlights itself.

<div @click="highlightBuilding($el)">
Status:
$refs

Named Facilities

Accessing specific elements by name.

$refs gives you access to elements marked with x-ref. Find a specific facility from the "Info Kiosk".

<button @click="findFacility('library')">
University Library
Athletics Gymnasium

Info Kiosk

Status:
$root

The Entire Campus

Manipulating the component's root element.

$root refers to the top-level element of the Alpine component (the one with x-data).

<button @click="triggerCampusAlert()">

Use the campus-wide controls below.

Status: