Learn Alpine.js
Playing
16. Watching

Episodes

0%
Your progress
  • Total: 2h 10m
  • Played: 0m
  • Remaining: 2h 10m
Join or sign in to track your progress

Transcript

00:00
We're now going to take a look at watching, which allows us to watch when a property within an Alpine component changes. So let's take a look at a contrived example here. Let's go ahead and initialize this with some data and let's just pull this down so we can create some methods out. We're going to need an XInit method or an init method in here to get this to work.
00:21
So within our data, let's just say that we had a message in here. Just keep this really simple to start with. And then let's go and create out an init method, which, as we've seen through the rest of the series, will run when this component initializes. Let's just add some content in there just to see this working.
00:39
So if we come over, give that a refresh, sure enough, we get ABC logged out. Now, what we can do within init is we can watch for this message being changed. At the moment, it probably won't make much sense. But in a moment, we're going to look at a more practical example of watching for a query change and performing a search.
00:57
So to watch something, we're going to go ahead and use watch. The first argument is the property that we want to watch, which in this case is just message. The second is the callback of what we want to do when this property changes. Let's go ahead and just console log out something and let's say changed.
01:15
OK, so what we can do is either add a button in here to change this message. So let's just say change message and let's add an on click handler. And let's just set the message to something else like so. OK, so let's get rid of the watcher for now just to see that message change.
01:36
And we could probably go ahead and do without putting that just in here with X text. There we go. And let's have a look. There we go. That changes. Let's bring that watcher back and let's see what happens. There we go. So we get changed. Now when we do call this callback,
01:54
this actually gives us the value of the item that's been changed. So we could say changed and also log out the value as well. Let's go ahead and do that. And you can see changed and that's to something else. So if you needed that value, you could go ahead and grab it from there as well.
02:09
Now that's the basics of watching. But let's look at an example of where we might want to practically use watching. Of course, it could be used for absolutely anything. But we're going to do this in the context of a search.
02:22
In the next episode, we're actually going to bring this together and do a full search on some kind of API. So let's go ahead and output our X data here. And inside of here, we're going to have a query which we can update via an input.
02:39
And we can use X model for this. So let's hook that up to the query. And in here, we might have some kind of perform search method. So let's go ahead and collect up some results. And for now, we're not actually hitting an API.
02:56
So I'm just going to manually set these results to a couple of things in an array. Apple, banana, and grapes. That'll do. Okay, so when we go ahead and start typing, that is when we want to perform the search. We want this to be like an instant search.
03:15
So let's go ahead and just really roughly output the results. We're not actually going to iterate through them. So let's say results. And let's go over and give that a refresh. So when I start typing in here, I want the search to perform instantly.
03:29
Our first instinct might be to say X on key down or key up. And then go ahead and perform the search. Let's actually use key up here. So let's go over and give this a refresh. When I start typing, we get the results back.
03:43
And of course, in reality, this would actually hit some sort of API to bring back the results, set them here. And then of course, what we would do is iterate through them. Now, this is absolutely fine for most instances. But what we ideally want to do is only perform a search when the query is updated, not on key up or key down.
04:04
If we had multiple inputs, for example, or we had other event handlers on here that we needed to use for key up and key down, this is a little bit too tightly coupled to performing the search. So what we're going to do instead is bring back our init method. And we're going to go ahead and watch the query.
04:22
And when that changes, then we're going to perform the search. So it's completely independent to what's being hooked up to that model. So let's go ahead and say this watch. Let's watch the query. And then we know that inside of the callback that we get here, we get the actual query.
04:39
And then we can go ahead and perform the search. And to perform the search, we might want to take in a query to actually send through to our API. So let's go ahead and say perform search query. And that will have exactly the same effect.
04:52
But now we've decoupled it from the key up or key down event on that input. If we go over and start to search again, you can see it works in exactly the same way. Let's head over to the next episode and look at a practical example of actually creating a real drop-down search, which allows us to perform a search based on a public API.

Episode summary

In this episode, we dive into the world of watching properties in Alpine.js components. First, we walk through a straightforward example to show how the watch method can react whenever a property inside your Alpine component changes. We use a simple message string and console log when changes happen—nothing fancy yet, just to get the basics down.

Once you get the foundational idea, we step things up a notch to explore a real-world scenario: implementing an instant search. Instead of tying the search functionality directly to keyboard events like keyup, we demonstrate how you can use watch on a query property. This way, whenever the query changes (no matter how), we fire off a search method. It’s a cleaner and more maintainable approach, especially if your component is handling lots of input events or complex interactions.

By the end, you’ll see how using watch makes your Alpine.js components tidier and your code less coupled, setting you up perfectly for the next episode, where we’ll build a real dropdown search powered by a public API!

Episode discussion

No comments, yet. Be the first!