Use Vue.js Watchers to Respond to Async Updates

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.

[00:00] Here's a form that, when submitted, adds a new dinosaur to a list. Alongside our data block, let's add a new block called watch. We already have our input field bound to the attribute input. Let's watch that value by naming our watcher input.

[00:15] Watchers are functions. We'll debounce this one, and then set this.buttonText to a ternary. If this.input is not empty, let's change the button text to "Add" and whatever the input is. If it is empty, change it back to "Add Dinosaur." Let's debounce this over 250 milliseconds.

[00:33] Now, when the input value changes, our new watcher is invoked, and the button text is changed to reflect it.

Joseph
Joseph
~ 5 years ago

Great video. simple to follow and to the point.

When trying to follow along, I noticed after following the course from the 4th video and then doing the 5th video my example in codepen didn't work. The examples assumed you have underscore as a dependency. I added that and everything was good :)

Mithun
Mithun
~ 5 years ago

Just a FYI - you used v-model which you did not talk about in the earlier lessons

Gavin Scott
Gavin Scott
~ 4 years ago

deleted comment*. It was a missing reference in my header declaration.

Yiğit Oner
Yiğit Oner
~ 4 years ago

Just a FYI - you used v-model which you did not talk about in the earlier lessons

Same goes for v-on:submit.prevent and v-bind:disabled