Series Intro - Beginner Level Alpine JS

Update a count state value with the x-on event listener directive in Alpine JS

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

Iterate through data with the `x-for` attribute in Alpine JS

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

Focus in input field on page load with `x-init` in Alpine JS

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

In this lesson, we learn how the `x-init` directive in Alpine JS lets us run a JavaScript expression once the component has initiated.

We see the nuances that allow us to trigger that code before Alpine performs initial DOM updates, or after these updates have been made.

https://app.egghead.io/api/v1/lessons/javascript-focus-in-input-field-on-page-load-with-x-init-in-alpine-js/subtitles

Simon Vrachliotis: [0:00] We have an input field with an x-ref attribute which allows us to trigger the focus state when a button is clicked. What we want now though is to have the input field focused immediately on page loads.

[0:12] Let's remove the button element and instead, we'll set an x-init directive on the root element of our component. x-init lets you run an expression where the component is initialized. That sounds like what we need. Inside, we'll reach for our refs object, target the nameInput ref, and call focus(). Let's reload the page and it works.

[0:36] Here's an interesting thing to note about x-init. Let's quickly set our initial name data to be Jess. In the x-init, let's console.log($refs.nameInput). We can see our input field here, but if we try to log its value with .value, it's empty. This is because x-init runs just before Alpine JS performs initial updates to the DOM.

[1:02] If we return the callback function inside of x-init, it will execute that function after the updates. You can see our console now logs Jess for the name property.

[1:13] As a recap, the x-init directive lets you run a JavaScript expression when the component is initiated, but before Alpine JS has performed initial updates to the DOM. If you pass x-init's callback function, it will wait until the initial DOM updates are made before running.

Focus in input field on page load with `x-init` in Alpine JS

Share this video with your friends

Course

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS