1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    alpineAlpine.js

    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.