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

Share this video with your friends

Send Tweet

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the $watch property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the debounce modifier on the x-model property to avoid firing an API call on each keystroke.