In this episode, we focus on setting up a watcher on our endpoint form so we can react to changes in the user's input smoothly and efficiently.
First, we create an edit form using Vue's useForm
composable, setting initial values for fields like location
and frequency
based on the props we get from the endpoint. We also ensure these fields in the form are properly connected to the correct data using v-model, so anything the user changes in the form gets reflected automatically.
Next, we tackle the problem of monitoring changes. Using Vue's watch
, we set it up so that whenever any field in the form changes, something happens (like sending an API request). However, there's a catch: without taking action, every keystroke could send multiple requests in quick succession—which isn’t ideal!
To solve this, we introduce the lodash.debounce
library. This lets us wrap our API-calling function so that it's only triggered once the user has finished typing (or making changes), with a 500ms delay. That way, rapid input doesn't overwhelm our backend, and the update process feels much smoother.
By the end of the episode, you'll see our watcher and debounce in action—changes to the form trigger the debounced handler correctly, reducing unnecessary API calls. Next time, we’ll actually wire up the API request to save the changes!